Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I am trying to use CSS to style the mobile responsive Webpage. When I resize chrome to 360px, the styles shows its detecting 432px.
When chrome is reduced to 320px, the content inside the li, div is empty.
<meta name="viewport" content="width=device-width,initial-scale=1" />
is added to the header section of the webpage
//media query for mobile responsiveness
#media only screen and (max-width: 320px) {
.header {
min-width: 100%;
margin: 0px;
text-align: left;
font-size: 10px;
font-weight: bold;
display: flex;
flex-direction: row;
// border: 1px solid red;
}
.container li div {
padding: 5px 75px;
margin: 0px;
text-align: center;
//border: 1px solid blue;
}
}
//code continues with different break points
#media only screen and (max-width: 432px) {
.header {
min-width: 100%;
margin: 0px;
text-align: left;
font-size: 10px;
font-weight: bold;
display: flex;
flex-direction: row;
}
.container li div {
padding: 5px 25px;
margin: 3px;
text-align: center;
width: 90%;
height: 100%;
font-size: 16px;
//border: 1px solid blue;
}
}
GIF indicating a 360px detected as 432px
CSS max-width: 432px will effect any screen size under or equal to 432px. Screen size 360px is less than 432px therefore this rule will be applied.
CSS is Cascading so the latest rule will overwrite any earlier rules.
If this is the last CSS then it will overwrite any values previously set by - for example - #media only screen and (max-width: 320px){ ...}
The way to solve this is to set your CSS in order so that the largest CSS is at the top, and the smallest width set is at the bottom:
#media only screen and (max-width: 720px) {
...
}
#media only screen and (max-width: 640px) {
...
}
#media only screen and (max-width: 480px) {
...
}
#media only screen and (max-width: 360px) {
...
}
If you decide to use min-width instead of max-width then obviously reverse the order of these media styles. The point is that the CSS will apply every style that fits the criteria and the last one is the one that sticks!. So The last one should be the final correct one; in this case
Related
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
I want to reduce Jumbotron size for various screen sizes in Twitter Bootstrap (latest 3.x.x version). The viewport breakpoints do get triggered now e.g. for display: none on a section, but the Jumbotron size doesn't change. What's the problem here?
#media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
.jumbotron {
height: 30%;
height: 30vh;
}
}
and this being my usual settings
.jumbotron {
padding-left: 50px;
padding-right: 50px;
background: #41A4DA;
margin-bottom: 0px;
min-height: 70%;
min-height: 70vh;
display: flex;
align-items: center;
}
min-height remains 70vh, height tries to be 30vh,
putting min-height in media query block should work.
Also, please make sure that #media query block is parsed after .jumbotron class in the css file.
https://www.w3schools.com/cssref/pr_dim_min-height.asp
I'm trying to utilize max-width on a button with a margin-left and margin-right set to 28px.
When my site is shrunk down for mobile, this button still retains its margins and carries over off-screen. How can I fix this?
Here's my CSS for the button:
.button {
border: 1px solid;
border-color: #5094CF;
background: #FFFFFF;
width: 450px;
max-width: 100%;
height: 48px;
margin: 0 28px 0 28px;
}
You need mediaqueries for all resolutions you need, for example:
#media (max-width: 600px) {
.box {
margin: 0;
}
}
#media (max-width: 400px) {
.box {
margin: 10px;
}
}
Different margins depending on the resolution of the client.
Good luck
There's a pleasantly easy fix for your issue, try this:
#media all and (max-width: 658px) { // for mobile devices
.button{
// your preferred styling properties for displaying in mobile devices
}
}
So far all of my media queries are fine, except this one. I have an actual iPad and I am using a simulator as well as my client doesn't like his logo resting against the edge of the screen, so all I'm trying to do is either give it a bit of padding or a margin (padding didn't work either). I figure another pair of eyes wouldn't hurt - am I missing something here??
#media screen only and (min-width:768px) and (max-width: 1024px) {
.site-header .home-link {
margin: 0 20px!important;
}
}
.site-header .home-link {
background: url(http://client.savorweb.com/INWS/wp-content/uploads/2015/04/iwns-logo.png) left no-repeat;
color: #141412;
display: block;
margin: 0 auto;
max-width: 1024px;
min-height: 150px;
padding: 0px 5px 0px 10px;
text-decoration: none;
width: 100%;
}
Your media query is malformed. It should be:
#media only screen and (min-width:768px) and (max-width: 1024px)
With emphasis on only screen instead of screen only.
I'm having some odd space issues on the left of my site. For some reason there is slightly more space on the left than on the right in mobile view, thus looking off-centered. I'm guessing its off for desktop view as well, but its not noticeable. I can't figure out what is making it this way. http://jeffreydowellphotography.com/
/* ---------->>> MOBILE gap/space issues <<<-----------*/
#media screen and (max-width: 400px) {
#pageWrapper { margin: 0;}
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 0;
padding-top: 0;
}}
/* ---------->>> MOBILE center logo <<<-----------*/
#media only screen and (max-width: 400px) {
h1.logo {
text-align:center;
margin-bottom: 20px !important;
}}
/* ---------->>> MOBILE logo size <<<-----------*/
#media only screen and (max-width: 400px) {
.logo-image .logo img {
max-height: 110px;
margin: 5px;
width: auto;
}
.social-links {
padding-top: 20px;
}}
Try removing the margin: 5px; on .logo-image .logo img in your mobile styles. The image with the margin may be wider than the div that contains the image and it comes off as being non-centered.
UPDATE
I took a look at your site, its actually the margin on the .slide selector. Add this in your mobile styles:
.slide { margin: 0; }