8,046 questions
1
vote
1
answer
202
views
How to adjust CSS via media query to a dynamically set orientation during printing?
I was trying to add a page break after an element when the page is in landscape orientation with a media query:
@media print and (orientation: landscape) {
.item2 {
break-after: page;
}
}
...
- 656
3
votes
0
answers
125
views
HTML Template with header
I am generating a PDF from HTML.
I have this below HTML file when I print this, header and main content is overlapping in second page how to fix this.
What I tried:
Used @page { margin-top: 120px; ...
- 19
1
vote
1
answer
121
views
Why is my top div element not as wide as the other two in my media query?
I am working on an assignment and I can't find where the solution differs from my code. It's causing one div to be smaller than the other two , while the solution has all the same width.
I've gone ...
0
votes
0
answers
99
views
Attribute media in source tag not working on smartphone device (iPhone)
I have a video, which has to play different sources on mobile and desktop. For that, I'm using the html video with two sources to be able to switch the video depending on the viewport. The switch ...
- 5,289
0
votes
0
answers
85
views
CSS media resolution dpi scale
According to the CSS spec:
The resolution media feature describes the resolution of the output device, i.e. the density of the pixels, taking into account the page zoom [...].
I generated the ...
- 595
-1
votes
1
answer
142
views
How can I adjust font sizes on Carrd using @media queries?
I have a Carrd website where I'm using several fonts that aren't on the site by default, so I've been using Embeds for all text. Right now I'm trying to add @media queries to the head to adjust font ...
0
votes
1
answer
119
views
How do I get the current value of `prefers-contrast` or similar matchMedia() queries?
Using JavaScript, I want to get the current value of prefers-contrast. The possible values are 'more', 'less', 'custom' and 'no-preference'.
Doing a
window.matchMedia(`prefers-contrast: ${value}`)
...
- 91.1k
0
votes
1
answer
138
views
How to show a custom footer only on the last printed page using pure HTML and CSS?
I need to generate a printed document directly in the browser (Chrome), using only HTML and CSS
My goal is to:
display a custom footer (e.g., a specific string) only on the last printed page.
Here's ...
- 11
0
votes
1
answer
101
views
What css screen width does the browser use when printing a webpage
When no @media print is specified in the CSS file for a webpage, what width does the browser use to determine which CSS applies to the printed page?
When we write our page code, we use a laptop first ...
- 3,106
0
votes
0
answers
57
views
Next.js transform @media queries to range syntax. How to avoid it?
I'm creating a site on Next.js 15, use @media queries.
When I tested my site on old browsers (Safari iOS 15), I have discovered that my @media queries don't work.
The problem is in Next.js CSS ...
2
votes
1
answer
72
views
Media query skipping a pixel
I wrote this code in CSS:
/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
body {
background-color: red;
}
}
/* Small devices (portrait ...
0
votes
0
answers
79
views
Media query problem with max-width in phone browsers
My media query works fine on desktop browsers ( when I resize the browser ) but it doesn't work on mobile browsers. I tried many solutions and found that the only problem is with the media query, ...
user23204753
1
vote
0
answers
101
views
CSS Animation, Media Queries, Divi on Wordpress
I have developed an animation for my website, to give the effect of polaroid photos being tossed across a table top. I did this using the following html and CSS. It works in Codepen.(The changing font ...
-1
votes
1
answer
88
views
My content is being cut in half when toggling to mobile version
I am very confused with checking responsiveness of a website I am coding through toggling the mobile version in inspect mode. So i have a basic website with nav and hero section etc. When I go to ...
- 7
0
votes
1
answer
44
views
Why does my CSS media query not apply on mobile devices even though the screen width matches?
I'm trying to make my website responsive using a media query, but the styles inside it are not applying on my phone, even though I'm sure the screen width is under 768px.
body {
background-color: ...
