On my shop page on tablets and phones in landscape mode, not all products are shown next to each other. They leave gaps, so sometimes there are two products and sometimes just one product in a row. I tried around with CSS and couldn't find a solution. My goal is to have them all next to each other and display a minimum of 2 in a row on portrait phones, instead of one. How can I do this?
Here's my site: https://malimo.co/shop/
If you open the website on a computer screen, just make the browser window smaller and you will see it)
You set width of products to 50% + margin. That is more than width of screen.
On landscape you have this
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3:nth-child(3n) {
margin-right: 15px;
}
change it to 0px
or change 50% to lower value. For example 46%.
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {
width: calc(50% - 7.5px);
}
i think you should set margin-right to 10
#media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {`
width: calc(45% - 7.5px);
}
i think this will sort the issue. set margin-right to 0
#media (max-width: 992px) and (min-width: 768px)
{
.theme__product__item--col__3:nth-child(3n) {
margin-right: 0;
}
}
Related
I am trying to use media queries to affix text to the bottom of a background image on a second page. When I edit the padding-top it affects the content on desktop mode, even if I adjust the media query to (max-width: 500px) and keep the desktop above 500px (which should then be outside the parameters of the media query, right?), but it has no bearing on mobile views. This is what I think the code should be, and it looks fine on desktop but leaves a large gap on mobile.
#media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}
I also tried adding the following code to force mobile to have no top padding, but again it had no effect on mobile:
#media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}
Neither of the snippets of code you have shown are legal CSS.
The first:
#media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}
does nothing. You have given the media query nothing to do - there is a matched pair of curly brackets immediately after the query. So everything will have the same padding-top.
The second:
#media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}
has a syntax error, there is no opening curly bracket immediately after the media query. Everything that pertains to a media query must come within curly brackets.
The correct syntax for this would be:
#media screen and (min-width: 250px) and (max-width: 499px) {
.site-boxed-container .site-content{
padding-top: 0%;
}
}
assuming you want to make padding top zero for viewports with widths between 250px and 499px.
I've been tasked with developing a wordpress site for my company with almost 0 web development experience. I've been fiddling with CSS a bit and I've come up with this steaming pile of trash.
Anyways, I only need to develop it for 3 resolutions (Company standards). However, auto-scaling websites are complete magic to me. So I've decided to hardcode elements for each of 3 specific resolutions (1920x1080, 1440x900, 1024x768).
Here's the code:
768 Users
#media (min-width : 768px)
{
.sidebar
{
right: 115px;
bottom: 40px;
}
}
900 Users
#media only screen and (min-width : 900px) and (max-width: 900px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
1080 Users
#media only screen and (min-width : 1080px)
{
.sidebar
{
right: 155px;
bottom: 65px;
}
}
Diagram
Question:
The issue is, the hardcoded scaling I've done only works for
the /768 Users/ and the /1080 Users/.
Every change I make in the /900 Users/ section does nothing, how do I fix that?
In your code, (min-width : 900px) and (max-width: 900px) will only target a width of exactly 900px, which is not desirable.
One technique is to use a "mobile-first implementation" in which you start with the smallest size first and work your way up. Think of it as styling for the smallest viewports first and then adding to those styles for increasingly larger viewports.
For example:
/* start with smallest "mobile viewport" styles here, as a default */
#media (min-width : 768px) {
/* add styles for 768px and up */
}
#media (min-width : 900px) {
/* add styles for 900px and up */
}
#media (min-width : 1080px) {
/* add styles for 1080px and up */
}
You might find this article informative: An Introduction to Mobile-First Media Queries
#media only screen and (min-width : 900px) and (max-width: 900px) meaning from 900px to 900px.... so nowhere at all.
If I understand your problem correctly, this should work:
#media only screen and (min-width : 900px) and (max-width: 1080px)
Your going to use CSS3 media queries to essentially define each viewport you are supporting; and from within write your styles per. There a few ways to call this - but I've found the below the simplest to test starting out... You will also have to make sure your meta viewport tag from within the HTML doc is properly defined.
#media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}
The .hide-for-small-only is max-width 0 - 39.9375em
But the .show-for-small-only is at 0em - 40em.
Shouldn't the .hide-for-small-only be 0 -40em since that is the number for .show-for-small-only? Why is there a max-width different between these two queries.
#media screen and (max-width: 39.9375em) {
.hide-for-small-only {
display: none !important; } }
#media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {
display: none !important; } }
This is one of those times where expedient code and comprehensible code are slightly different things.
Foundation's #Media Queries
/* Small only */ #media screen and (max-width: 39.9375em) {}
/* Medium and up */ #media screen and (min-width: 40em) {}
/* Medium only */ #media screen and (min-width: 40em) and (max-width:
63.9375em) {}
/* Large and up */ #media screen and (min-width: 64em) {}
/* Large only */ #media screen and (min-width: 64em) and (max-width:
74.9375em) {}
So when width === 40em, we'd be expecting medium.
The reason that .hide-for-small-only is max-width: 39.9375emis that it is possible for width to exactly equal 39.9375em and for the condition to be true (e.g. hide). So for all width values within the small range this element is hidden by display: none. This is pretty straightforward and easy to read.
Whereas if you want to show the element (.show-for-small-only) for 0 to 39.9375em only, then the first width where you'd want to hide the content would be one pixel over small === 40em (hence min-width: 40em). This is not a media query to say show between x and y, it is to say hide under x and over y.
The most confusing part is really because they are named as though one "hides" and the other "shows"... but actually they BOTH hide, but at different widths.
I assume the max-width: 0em is because the #media query is generated by a SASS mixin and that has to work for all the "only" classes, which would actually need a max-width to define the bottom width, but not so much for small.
In the media queries
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
This will execute when the screen's min-width is 300px.
If i want to execute the code when the width is inbetween the 300px - 500px how i will write the code.
Its pretty simple
#media screen and (max-width: 359px) and (min-width: 240px){
.detail_image{height:160px; width:280px;}
.video_cntrl{height:160px; width:auto;}
}
I highly suggest you to use aspect ratio based resolution it will rectify your worries.
please view it.
#media screen and (min-width: 300px) and (max-width: 500px)
{
body {
background-color: lightblue;
}
}
I am struggling with a website regarding media queries. I have this code snippet as part of my menu
.flexnav.flexnav-show {
margin-top: 52px; } line 513 in my css
and with a media query set at #media all and (min-width: 800px) I have this code snippet for my tablet.
.flexnav.flexnav-show {
margin-top: 0px; } on line 638 in my css
However, when viewing the page on a tablet the margin-top is still set at 52px.
I have a similar issue with a another media query. I have this following code snippet
#media only screen and (min-width: 481px)
header hgroup {
top: 12%;
}
For my desktop I have the following:
#media only screen and (min-width: 769px)
header hgroup {
top:15%;
} at line 462
When on the desktop the top is still 12%
This is the link to the website.
Thanks
-Sohail
You need to use "max-width"
EXAMPLE:
/* DEFAULT */
.some-div{top:30%;}
/* RESPONSIVE */
#media screen and (max-width: 769px){
.some-div{ top:15%;}
}
#media screen and (max-width: 481px){
.some-div{ top: 12%;}
}
Sometimes you can use "!important" to rewrite the previous state in CSS but is not necessarily.