Is there a way to rewrite this code so when the screen is full screen and tablet then the blue-cus-box margin-top is -175 and if the screen is, for example, iPhone 10 or other mobile devices then the margin-top is -150?
#media screen and (max-width: 767px) {}
.blue-cus-box {
margin-top: -175px !important;
z-index: 999 !important;
}
Appreciate any help
Have you considered just using a media query? The below snippet would set the margin-top to -175px on any screen size over 768px. A guide to using media queries in CSS can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.blue-cus-box {
margin-top: -150px;
}
#media screen and (min-width: 768px) {
.blue-cus-box {
margin-top: -175px;
}
}
Related
I am creating a responsive landing page. I have mentioned different settings for different screen size in CSS. I have mentioned 3 screen sizes, i.e. max-width 320, max-width 375 and max-width 780. However phone having screen width 320 is taking the properties of screen width 375px from the css.
<style>
#media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}
#media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
#media only screen and (max-width: 780px)
{
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
</style>
As per the above code, a phone having max-width 320px, should take the height 95px. Similarly a phone having max-width 375px should take the height 55px. However a phone with max-width 320px is taking height 55px (which is actually for max-width 375px).
the correct order should be like this:
#media only screen and (max-width: 780px) {
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
#media only screen and (max-width: 375px) {
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
#media only screen and (max-width: 320px) {
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}
The order of your media queries matter in css! Check here to know more about it.
Why does the order of media queries matter in CSS?
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
I think you need to take a moment to analyze what your code is doing.
#media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}
What this does is if the browser window size is upto 320px then apply the styles within the block
#media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
This applies styles for the window screens with max-width 375px. The gotcha here is that if the screen width is 320px then it is not greater than 375px and hence both the styles in the media query is applied and the existing ones are overridden in the order they are parsed.
if you want some styles to specifically for screens that are greater than 320px but less than 375px then you would use
#media only screen and (min-width: 320px) and (max-width: 375px)
I use Bootstrap 4 for making my website responsive. Bootstrap is a Mobile first. As I understand that's mean I should first write CSS for small screens and then add breakpoints for bigger screens.
That's what I have:
#main{
width: 100%;
}
#media (min-width: 576px) {
#main{
width: 90%;
}
#media (min-width: 768px) {
#main{
width: 80%;
}
}
When in Chrome I open console and click "Toggle Device Toolbar" and change screen width to 350px ("responsive"), it uses css for 'min-width 768 px' (not even for 576px) and makes #main width 80%.
Why is that happening and how to solve it? Thank you!
try to use #media screen and (min-width: XXXpx) { ... } instead of just #media (min-width: XXXpx)
You could use #media screen and (min-width: [...]px). Otherwise your code seems good.
Currently I have several divs with the CSS
.bodyText {
margin:auto;
padding: 1% 20%;
}
But when the screen gets reduced to the size of, say, an iPhone screen I want to reduce the left & right padding to 1%.
Thanks!
What you're looking for is known as a media query. These are denoted by the # symbol in CSS, and can not only target screen widths, but also specific orienations:
/* Any iPhone */
#media screen and (max-device-width: 480px) {
.bodyText {
padding: 1%;
}
}
/* iPhone Portrait */
#media screen and (max-device-width: 480px) and (orientation:portrait) {
.bodyText {
padding: 1%;
}
}
/* iPhone Landscape */
#media screen and (max-device-width: 480px) and (orientation:landscape) {
.bodyText {
padding: 1%;
}
}
You can do it with #media queries. There are rules for set specific size of screen, or more.
Example:
#media (max-size: 800px) {
// here is your code
}
So my customer screen is # 1680px, but screen is 1200px, so I have to use Chrome's Devtools to emulate a larger screen. I created a media query in my css file:
#media (min-width: 1440px)
But Chrome is using the smaller query when I have the resolution set to 1680px in Devtools:
#media (min-width: 1200px)
I don't know if its Devtools, or Chrome, or something I did. The page im working on is http://www.becoming1percent.com/ and only section I have so far with that larger media query is the section that says "The Entrepreneurs Monthly Book Box", and the div its in (the class is .hero-content). Please help!
It depends on how did you order your query. I saw your code is
#media (min-width: 1440px) {
#index-hero .hero-content {
margin: -300px auto 15px;
}
}
#media (min-width: 1200px) {
#index-hero .hero-content {
margin: -60px auto 15px;
/*text-align: left;*/
width: 50%;
}
#index-hero {
min-height: 900px;
margin-top: -50px;
}
}
So basically browser will apply #media (min-width: 1440px) first then override it with style defined in #media (min-width: 1200px).
min-width is often used for mobile first approach so everything will go from smaller to larger screen, for example mobile -> tablet (min-width: 480px) -> normal desktop (min-width: 768px) -> large screen (min-width: 1024px)
So I suggest you re-order the stylesheet, bring 1440px down below 1200px.
Or you can define the max-width to control deeply.
#media (min-width: 1440px) {
#index-hero .hero-content {
margin: -300px auto 15px;
}
}
#media (min-width: 1200px) and (max-width: 1439px) {
#index-hero .hero-content {
margin: -60px auto 15px;
/*text-align: left;*/
width: 50%;
}
#index-hero {
min-height: 900px;
margin-top: -50px;
}
}
Get firefox portable at :
http://portableapps.com/apps/internet/firefox_portable
Then use CTRL+Shift+M to get the mobile emulator.
Much better than the chrome one.
The chrome one gets affected by addons and is buggy, the firefox one with a fresh install works 100% and is very fast for real time resizing also, great to show clients
I am creating a mobile application in which I am getting some error.
here my core style is for desktop:
.abc{
width:1001px;
}
#media only screen and (max-width : 320px) {
.abc{
width:320px!important;
}
}
#media only screen and (max-width : 480px) {
.abc{
width:480px!important;
}
}
Here from the above styles only the style of 480px is applying for both the 320px and 480px.
Is there any alternate suggestion to come over this problem.
This is because max-width:480px; still targets 320px too. Change the last one to:
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc {
width: 480px !important;
}
}
and this will stop that query affecting anything below 321px.
It doesn't look like you need !important This fix has nothing to do with that so I would remove that if I were you, it may mess things up in the future
An alternative solution would be to move the 320px query below the 480px. They both have the same specificity so the one that comes last in the cascade would take precedence.
set a min-width
.abc {
width: 1001px;
}
#media only screen and (max-width: 320px) {
.abc {
width: 320px;
}
}
/* set a min-width here, so these rules don't apply for screens smaller than 321px */
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc{
width: 480px;
}
}
If I'm right you should be able to remove the !important syntax too...