I would like to know the best practice for button resizing in Boostrap 3.
My code is:
Bonus
Bonus
I think this method generates too big file size if I duplicate every line. So, maybe I can override the btn-lg class in media queries. What do you think? Is there any 'official' practice?
If you'd like to eliminate duplicate markup, you could use CSS media queries instead and scale the button size accordingly..
Working demo: http://bootply.com/128288
#media (max-width: 768px) {}
#media (min-width: 768px) {}
#media (min-width: 992px) {}
#media (min-width: 1200px) {}
Related
I see some people declaring for example #media (min-width: 1200px) and other people declaring #media (max-width: 1200px).
Do we need to declare both? If not what's the correct way to choose from the two?
I have a website. The page width is perfect in 15.6 laptops.
But when it comes to larger displays, it gets ruined. Can you please help?
any #media styles to be added?
Thanks
It seems you have written that CSS specially for your screen's resolution. To fix that you need to use media queries. Example:
#media (min-width: 1280px) {
width: 1120px;
}
I checked and you have a similar problem on smaller screens. You would like to apply a mobile-first strategy, so the layout looks good on all screens. Apply the same strategy (media queries) to set diffences sizes for different resolutions. The most common solution is to use 3 breakpoints. Example:
#media (min-width: 768px) { }
#media (min-width: 1280px) { }
#media (min-width: 1440px) { }
The CSS that you write inside those media-queries will target different screen sizes, but also the CSS in the smallest media-query will work in the next ones if it is not overrriden.
Please give width by % value if you give that in px it will change for different
I am really confused as to what the Media Query breakpoints should be. The way I am use to doing it is having one pixel less than the next break point, for instance
#media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx
#media screen and (min-width: 750px) and (max-width: 969px) {}
etc.
But some people use the exact values such as
#media screen and (max-width: 750px) {}
#media screen and (min-width: 750px) and (max-width: 970px) {}
Wouldn't the second approach break it? My understanding is the first approach is the way to go.
And what about if you do something such as
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
And I want all the mobile designs to apply to 750, but at 750 is where the tablet view starts. Same for 970. In this case would having it also one pixel less be correct? I.e max-width: 749 and max-width: 969
Yes, the first one is correct. In the second one, if the screens is exactly 750px wide, both media query sections will apply, which can cause problems.
Concerning your addition:
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
In this case the rules in the second query will overwrite those with identical CSS selectors in the first one, which will probably also cause problems.
The usual way would either be the other way round (desktop first approach), or using a mobile-first approach where you first state the general rules for mobile sizes, and then add media queries for larger sizes which overwrite the general rules. That would for example be
#media screen and (min-width: 720px) {}
#media screen and (min-width: 1280px) {}
I swear I had this working, but it's not. Is such a thing possible?
I don't want to prefix the 100's of styles with body:not(.phone)
Thank you.
#media only screen and (max-width: 768px) and (body:not(.phone)) {
}
NO. That's not how can do with #media queries. You must use like below:
#media only screen and (max-width: 768px) {/*css rules not applicable before curly brace*/
body:not(.phone){/*css rules must be within curly braces*/
color: #f00;
}
}
So, what you mean with #media queries is not possible.
I have a situation that would easily be solved if I could write a CSS media query containing a logical OR. Since I can't, I'm looking for the most efficient alternative.
GOALS: 1) Create a minimalist, but responsive, page 2) use HTML & CSS only 3) keep all CSS within the section instead of external files 4) minimize repeated code
#media (orientation: landscape) {...}
#media (orientation: portrait) {...}
#media (width: *tiny screen*) {...}
#media (width: *small screen*) {...}
#media (width: *medium screen*) {...}
#media (width: *large screen*) {...}
The above works well so far, in that any situation should trigger one set of orientation-based rules and one set of size-based rules.
The sticking point is that I want "tiny" screens to use the portrait rules even if they are landscape.
#media (orientation: portrait) OR (width: *tiny*) {...}
#media (orientation: landscape) {...}
#media width: *small screen* {...}
#media width: *medium screen* {...}
#media width: *large screen* {...}
Without being able to OR the two conditions in one query, any solution I've come up with requires either repeating the entire set of portrait rules under the "tiny" style OR using external style sheets which I'm trying to avoid.
Anyone have a better idea?
you CAN write OR in mediaqueries. just write is as if is was a css-selector and use a comma "," :)
#media (orientation: portrait) OR (width: *tiny*) {...}
does not work, but
#media (orientation: portrait), (width: *tiny*) {...}
does
edit: see CSS media queries: max-width OR max-height