I'm working on my portfolio for responsiveness on mobile using scss. I tried to use padding or overflow: hidden; it's not working and I also tried to overwrite it using(!important), it's still not working. It's not taking any properties at all for this media query. but takes property for larger screen #media screen and (max-width: 950px) when I inspect from chrome browser. What do you think might be a solution to this problem?
I tried to use padding or overflow: hidden; it's not working and I also tried to overwrite it using(!important) and the justify-content:unset; it's still not working. I'm expecting it to take the property of the smaller screen. mobile size of 390 * 844, like iphone 12pro A51/71
here is what I've tried for smaller screen:
#media screen and (max-width: 400px) {
.about-container {
padding-top: 2.5rem;
}
.controls {
overflow: hidden !important;
justify-content: center !important;
}
}
but on inspection, it's not taking the properties and i tried other browser, it's still the same.
Related
https://staging-digemaya.kinsta.cloud/membership/
I have removed the div's using
.page-id-16713 .cta-2-banner-2 {
display: none
}
.page-id-16713 .quotes-wrapper {
display: none
}
however, they still display on tablet and mobile. I have searched everywhere and nothing is working.
I used the inspector tools on your site, and it looks like there's a media query being applied to those styles. Try moving
.page-id-16713 .cta-2-banner-2 {
display: none
}
.page-id-16713 .quotes-wrapper {
display: none
}
to the top of the stylesheet instead of the bottom and see if this fixes the issue.
For future reference, you should try to keep your #media queries at the bottom of your CSS. You can read more on this here
It appears that the css you shared is not in a media query when quickly looking through the html from your site, however the browser inspector tool shows that it's in a media query (2x):
#media screen and (min-width: 768px)
#media screen and (min-width: 768px)
.page-id-16713 .cta-2-banner-2 {
display: none;
}
This means there might be invalid css somewhere before this property that is causing trouble. Browsers try to make sense of these things and that's why it's in a media query. I recommend a w3c validator or taking all your css into your code editor and combing through it.
The quickest fix (although not the recommended cause the real invalid issue should be resolved to prevent future trouble):
#media only screen and (max-width: 40em) {
.page-id-16713 .cta-2-banner-2,
.page-id-16713 .quotes-wrapper {
display: none
}
}
I'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the second. Please help.
I've tried changing the values of the viewports but this doesn't work. I hope this problem is obvious to someone with more experience than I, because I really don't know what to do.
#media (min-width: 500px) and (max-width: 768px) {
(ex.) #randomDiv {
background-color: blue;
width: 100px;
}
}
#media (min-width: 768px) and (max-width: 1023px) {
(ex.) #randomDiv {
background-color: red;
width: 300px;
}
}
When the viewport hits 768px it decides to mix styles, p.e. the background color changes to red, but the width doesn't change. Does anyone know what I'm doing wrong? After 768px (769px <) everything works just fine, as well as before 768px. Please help.
When using media queries to make your frontend code responsive, it is quite useful to think about the base or starting styles then use the queries to alter those styles in one direction only. What I mean is instead of using max-width and min-width in your queries, start with the non-query styling then override those rules with either min-width OR max-width but not both. This way the changes are seamless and you only need to think about the exact breakpoint location and which styles are being overridden.
In using this approach the order of the media queries in your stylesheet matter too. Notice the widest query goes first here, if I were using min-width instead it would go the other way around.
Try looking at this in "Full page" mode and change the size of your screen down from full width.
#randomDiv {
color: white;
margin: 0 auto;
padding: 20px;
/* only background-color & width will change */
background-color: purple;
width: 90%;
}
#media (max-width: 1023px) {
#randomDiv {
background-color: red;
width: 300px;
}
}
#media (max-width: 768px) {
#randomDiv {
background-color: blue;
width: 100px;
}
}
<div id="randomDiv">I am so random.</div>
I'm new to WordPress and CSS; currently creating a WordPress site and on the last stretch. I need to figure out a way to override the current padding on desktop and laptop sized browsers, as the elements are stuck in the middle with padding on either side on mobile devices.
I've tried to create my own CSS but it's not working (im rubbish) so I'm hoping some experts can help. I tried this below-
#media all and (max-width : 780px) {
.column{
padding-left:0px;
padding-right:0px;
}
}
The webpage I'm testing it on is https://www.xordium.co.uk/your-cloud-journey/
Thanks!
#media only screen and (max-width: 600px) {
.vc_custom_1528804063483 {
padding-left: 20px !important;
}
}
simply put this in your style.css file with the width you have set your width as i write 600 for example.
Hope this will work for you.
I am developing a website with a desktop and iPhone 4 viewport. When I am doing the bulk of development and viewing it through my desktop's browser using a viewport chrome extension, it is rendered fine and looks good. But when I view it on my iPhone 4s the width is corrupted. I have no logic that tells it to act like this. I cannot see what the issue is, was wondering if anyone could think of some possible problems?
Desktop (at 320 viewport): -----
iPhone 4S:
Query used for the .container{} class that wraps the entire site.
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (min-width : 320px) {
.container {
width:75%;
}
}
Many thanks for your help.
You likely have two problems at work here that are unrelated to your .container. Why do I think this? Your menu is showing up nice and large but your other content isn't. You said .container wraps everything. So we shouldn't be seeing a discrepancy there.
So, you're two problems are likely related to:
You're probably missing some meta tags in your <head>. It looks like media queries seem to be working for you, but your scale is off. Try adding in <meta name="viewport" content="width=device-width, initial-scale=1">
Your menu styles. Do they have a set size? Is there a media query that's adjusting it?
Without seeing the menu styles, I can't really say what exactly is wrong there...
use this code for iphone 4
Screent width Between 320px to 480px
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media and (min-width : 320px) and (max-width : 480px) {
.container {
width:75%;
}
}
Else use below code for <320px widht screen
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (max-width : 320px) {
.container {
width:75%;
}
}
And your mistake is, You wrongly put min-width : 320px instead of max-width : 320px
More...
My best guess is that it's something to do with the Retina display. The viewport on your desktop measures pixels on an ordinary display. On a 4s 320 pixels are not actually full screen - instead it's 640. You should check out the device pixel ration query http://css-tricks.com/snippets/css/retina-display-media-query/
I have copied some media query code from elsewhere which works absolutely fine, but when incorporating into my own project, it doesn't seem to work.
I've looked at previous stackoverflow questions, and tried implementing the fixes or tests such as,
checking whether the media query is working by applying an unwanted background color, which fails. I've also made sure to add the viewport metatag.
Here is my media query
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
body { margin: 5px; width: 5px; }
.testimonial {
background-color: black;
}
}
The live page can be seen here (click on testimonials, and then click on a picture): http://krmmalik.com/me/
update: Just spoke to a colleague and he seems to think that the reason the media queries are not working is because the testimonials content is being loaded in an iframe at which point the media detection doesn't take place?
I tried this and it work perfectly.
why would you set the body width to 5px, if the max-width should be 479px?
#media screen and (max-width: 479px){
body {
margin: 5px;
}
.testimonial {
background-color: #000;
}
}