I am using SCSS trying to set up some media queries for max-width: 320px and max-width: 768px
I have a div with class item-content inside an Owl Carousel slide with width set to 600px but I want to reduce the width for smaller devices. I want to use 200px for resolution 320px wide and 300px for resolution that is anywhere between 320 and 768.
This is what I'm using in my _app-responsive.scss but as you can see, I have !important set to the width of item-content because otherwise it is getting overridden even though I am on resolution of the iPhone 5 which is 320px wide.
#media (max-width: 320px) {
.home {
section#top {
.owl-theme {
.owl-dots {
top: -10%;
}
.owl-stage-outer {
.owl-stage {
.owl-item {
.item {
.item-content {
width: 200px !important;
}
}
}
}
}
}
}
}
}
#media (max-width: 768px) {
.home {
section#top {
.owl-theme {
.owl-stage-outer {
.owl-stage {
.owl-item {
.item {
h2 {
font-size: 16px;
}
.item-content {
width: 300px;
}
}
}
}
}
}
}
}
}
This is my overall app.scss
I am importing the file with the media queries last, I tried importing it before the _app-custom.scss but that didn't change anything.
#import 'app-variables';
#import '../../vendor/bootstrap-sass/stylesheets/bootstrap';
#import '../../vendor/bootstrap-sass/stylesheets/bootstrap-compass';
#import '../../vendor/font-awesome/scss/font-awesome';
#import 'app-custom';
#import 'app-responsive';
The two media queries would make width: 200px when window is between 0px and 320px but also width: 300px when window is between 0px and 768px.
To solve this you can apply width: 200px without using a media query and only when windows size is greater than 320px use width: 300px:
.item-content {
width: 200px;
}
#media (min-width: 321px) {
...
.item-content {
width: 300px;
}
}
And:
#media (max-width: 320px) {
...
.item-content {
width: 200px;
}
}
#media (min-width: 321px) and (max-width: 768px) {
...
.item-content {
width: 300px;
}
}
Should also works because your issue is that the query with the max-width: 768px is always overwriting the media query with max-width: 320px
Related
My page here: https://webtan.jp/
I hide this section:
#top__fullcarousel {
display: none;
}
but after hiding it, the following part (the siteContent block) didn't fit (
the error here)
I fixed the padding and it's only working with viewport(min width 1200px), not working rightly with other viewports (mobile, ipad...)
.siteContent {
padding-top: 129px;
}
How can I responsive it in this case?
You can explicitly set padding that you need for each by each device width:
#media screen and (max-width: 1000px) {
.siteContent {
padding-top: 129px;
}
}
#media screen and (max-width: 850px) {
.siteContent {
padding-top: 109px;
}
}
#media screen and (max-width: 600px) {
.siteContent {
padding-top: 89px;
}
}
#media screen and (max-width: 320px) {
.siteContent {
padding-top: 69px;
}
}
Of course you can use a lot of another methods, but this one is most ease way.
I'm using Bootstrap 4 with the container at default width on my desktop screen.
I want the main content section of my app to be max 940px container on big screen.
Do I simply override the bootstrap container class, or create new class container-2? or something else?
Edit
according to the bootstrap.css you could build your own container class. These are the classes you have to 'rebuild':
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container {
min-width: 992px !important;
}
You should never override original bootsrap-classes.
To ensure that everything works well you could do something like this:
#media (min-width: 992px) {
.container.max-width-940 {
max-width: 940px !important;
}
}
#media (min-width: 1200px) {
.container.max-width-940 {
max-width: 940px !important;
}
}
.container.max-width-940 {
min-width: 940px !important;
}
and use it like: <div class="container max-width-940"></div>
Since the Bootstrap container is responsive and uses media queries to set the max-width.
The container alone is only used to define width, auto margins and padding. Other grid class (ie row, col) are not dependent on it, so it would be easiest to define your own custom container.
To define your own container-940...
.container-940 {
width: 100%;
max-width: 940px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Demo: https://www.codeply.com/go/QOAjmGLp7K
Or, if you want to use the existing .container the overrides would be...
#media (min-width: 992px) {
.container {
max-width: 940px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 940px;
}
}
Demo: https://www.codeply.com/go/QOAjmGLp7K
If you want to change the max-width to be smaller on smaller widths than you'd adjust the media queries as desired:
#media (min-width: 576px) {
.container {
max-width: ??px;
}
}
#media (min-width: 768px) {
.container {
max-width: ??px;
}
}
#media (min-width: 992px) {
.container {
max-width: 940px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 940px;
}
}
change css in bootstrap file
click on above link and replace that pointed 2 value with 940px in bootstrap.min.css file.
Maybe something very obvious but it depends which reference is first in your code: bootstrap CSS or your personal CSS file. All things equal the last reference wins.
When I am using
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 80%;
Height: 80%;
}
}
The code does not work and defaults to original styling however the code works for
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%;
Height: 50%;
}
}
all the way up to 1024px and then breaks
anyone have any idea why this is happening?
Your max-width: 1024px query must be placed before the max-width: 425px query in the code, otherwise, as an expected result of CSS specificity, overriding will occur.
Demo of wrong order:
#imgWrapper {
border: 1px dashed red;
padding: 10px;
position: relative; }
#imgWrapper::after { content:"Default - Desktop/Large Screen"; }
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%; }
#imgWrapper::after { content:"Max-425"; }
}
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 75%; }
#imgWrapper::after { content:"Max-1024"; }
}
<div id="imgWrapper">Media Query: </div>
Proper order:
#imgWrapper {
border: 1px dashed red;
padding: 10px;
position: relative; }
#imgWrapper::after { content:"Default - Desktop/Large Screen"; }
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 75%; }
#imgWrapper::after { content:"Max-1024"; }
}
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%; }
#imgWrapper::after { content:"Max-425"; }
}
<div id="imgWrapper">Media Query: </div>
jsFiddle: https://jsfiddle.net/azizn/d5bto8vL/
To conclude, media queries that are based on desktop-first model (max-width queries) should start with default styling for large screens then adding queries for lesser sizes, like so:
large/default > 1024 > 768 > 425 etc
Whereas in a mobile-first model, you use min-width queries and the default styling is smallest then add bigger screens:
small > 425 > 768 > 1024 etc
I'm creating a responsive page using CSS Media Queries. I can see in Chrome's developer tools that the media queries are working, however, they are not overriding my default styles. For example, take these styles:
#hero .text {
margin: 150px;
}
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
In my browser, if I resize to 1024px wide, I can see that the all the above styles are being requested BUT the default style (with margin 150px) is what is finally used.
ANy idea what I'm doing wrong?
change this
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
to
#media screen and (max-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and
#media screen and (min-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and this one below,
.text { /*removed #test */
margin: 150px;
}
My query was about my wordpress site womensfertility n hormones. c o m
if I view the site on a smaller screen with resolution like 1024 x 768
the site would look like this:
but if I view it on my normal computer screen with big resolution it looks good,
then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:
.banner .logo img{width:200px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 100%;
}
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 75%;
}
I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?
use CSS Media Queries
#media (max-width: 600px) {
/*code for screen with max with 600px*/
}
#media (max-width: 480px) {
/*code for screen with max with 480px*/
}
or:
body { color: white; background: gray; font-size: .5in }
#media screen and (min-width: 1024px){
body { background: red; }
}
#media screen and (min-width: 641px) and (max-width: 1023px){
body { background: yellow; }
}
#media screen and (max-width: 640px){
body { background: green; }
}
for example :
#media (max-width: 480px) {
.banner .logo img{width:140px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 80%;
}
.container {
width: 35%;
}
}