8,072 questions
0
votes
1
answer
23
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: ...
0
votes
1
answer
24
views
media queries not working on specific pixel width CSS/SASS
I have these 2 media queries
@media all and (max-width: 1199px) {
// CSS
}
@media all and (min-width: 1200px) {
// CSS
}
When testing this out it works well, but when testing it out, only in ...
- 386
2
votes
1
answer
35
views
How to let a bslib navbar collapse at another Bootstrap breakpoint?
In my shiny app, I need to change the default bslib behavior of collapsing the navbar at 992px by setting it at 1200px.
Here's a reprex:
library(shiny)
library(bslib)
# Reproducible example UI
app_ui ...
- 329
1
vote
2
answers
61
views
"@media print" - QR code shows up with CTRL-P but not with window.print()
I would like to add a QR code when someone prints a page from our website. I have added the following embedded CSS:
@media print {
body:after {
content: "Convenient QR code to return ...
- 179
-1
votes
1
answer
46
views
How to prevent line overlapping and make media query work for large screens [closed]
How to prevent line overlapping and make media query work for large screens
HTML
<p style="font-family: "verdana"; font-size: 18px; color: black; line-height: 18px; text-...
- 33
-3
votes
1
answer
42
views
Opacity strange effect when resizing
I'm developing a website and i have this code when the CSS starts
/* Menu hidden by default*/
#menu {
transform: translateY(-35px);
opacity: 0;
transition: 0.35s;
}
With this schematized ...
- 43
0
votes
0
answers
13
views
HTML progress element missing from browser print [duplicate]
If a user attempts to print our webpage that contains <progress> elements, the elements appear empty… unless the user enables the hidden/advanced “background graphics” (Chrome) or “print ...
- 11.7k
1
vote
0
answers
34
views
Media Queries Issue: Wrong Breakpoint Applied in Mobile Desktop Mode
When viewing my site on a laptop, responsiveness works as expected, and the same applies when viewing it on a mobile device. However, when switching to Desktop Mode from a mobile browser, the styles ...
- 11
1
vote
1
answer
88
views
Responsive image sizing: Can max-width be coded for a percentage value that scales as viewport width changes?
I am a first-time poster, and I am very unsure of where to post this question.
I would like to utilize responsive design on images, where the max-width scale continuously varies as the viewport width ...
0
votes
0
answers
20
views
Media queries not working after deploying project to Vercel
I’m currently working on a project with React and I’ve encountered an issue. The media queries are not working:
@media screen and (max-width: 768px) {
/* styles here */
}
When I check how the page ...
- 1
0
votes
0
answers
32
views
flex-direction: column not responding to media query for screen sizes <= 768
Simple CTA cards. Flex-direction is set to column for media query <= 768, but browser is ignoring the breakpoint.
I expected the items in the container to display in a column format when the screen ...
- 9
2
votes
1
answer
264
views
Tailwind media queries don't work properly on Safari
I've done some research but can't find anything that relates to an issue I am having. I am using Tailwind, Typescript, and Next JS. My app works fine on Chrome, but I am having an issue with all my ...
- 91
0
votes
0
answers
27
views
Media query not working in Auth0 email template
I'm using Auth0 email template to send emails. I've customized the template with using my own design and I want to make sure that it works for mobile, but the media query isn't working.
Here are my ...
- 160
1
vote
1
answer
34
views
Why does my wrapped grid component in a responsive page not associate to the correct class as defined in a @media style using CSS
[github repository](https://github.com/PEG11690/coursera-mod2-solution/tree/main)
[github page](https://peg11690.github.io/coursera-mod2-solution/)
I'm taking an introductory class and have an ...
- 11
0
votes
1
answer
27
views
Mobile hover on
My responsive website desktop display has a grid of images that dim and display a title when the mouse hovers, however on the mobile display the hover state is displaying permanently when the page ...
- 1