Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 months ago.
Improve this question
I have been working on making my website mobile responsive with media queries. But it's very tiring to have to adjust every element when the width reduces by 50px. I have too many media queries and wish to shorten my code. what is the best way to use media queries? or is there a better alternative to build my responsive design with?
In my opinion, the best way to reponsive, is to use the property, attribute, units ... relative.
you can use box-sizing: border to avoid recaculating the width, height of content. You can use rem, percentage to change size of elements when you code #media screen.
Making the elements depend on each other and depends only on a few initial elements like font-size of html...will be increase responsiveness
you can follow some tutorial about Responsive Beginner JS Project
https://www.youtube.com/watch?v=FazgJVnrVuI&ab_channel=BrianDesign
https://www.youtube.com/watch?v=3-2Pj5hxwrw&ab_channel=BrianDesign
You can use CSS variables. Then within #media change the variables as follows.
:root{
--font: 12px;
}
.title{
font-size: calc(var(--font) + 10px);
}
.subtitle{
font-size: calc(var(--font) + 5px);
}
#media only screen and (max-width: 700px){
:root{
--font: 15px;
}
}
There is a w3schools documentation at https://www.w3schools.com/css/css3_variables.asp
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I've been looking for ways to make my web designs as responsive as WordPress, as I've seen with WordPress the content grows and shrinks as soon as the window gets resized even into extremely small windows like 100px width windows, seemingly without many media queries. Is it possible to make a site this responsive with just pure HTML, CSS and Javascript?
If so, how?
You can control this responsive resizing e.g. with the media only screen and max with properties via CSS and then adapt the CSS code to fit your needs. Thats a quick and easy start in responsiveness. You can have a look here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
font-size: 16px
}
}
#media only screen and (max-width: 400px) {
body {
background-color: lightblue;
font-size: 14px
}
}
There are definetly way better options, but this one is very simple.
This question already has answers here:
conditional statement for screen resolution?
(3 answers)
Closed 6 years ago.
I am developing a website in wordpress but I am using a builder call Divi. In this builder I can have custom css code but not java.
How can I do something like this but purely in css:
if heigh-res > 1000 then
padding-top: 200px;
For those that have marked my question as a duplicate, it is not. The question that you think I have duplicated asks about changing the .css file that is loaded depending on the screen resolution. I am not asking about changing the file but I am asking about setting padding if the screen height is greater than 1000px.
Try using media queries and set min-width as you want.
Here an example.
<style>
#media (min-width : 1000px) {
.your_class {
padding-top: 200px;
}
}
</style>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've never used media queries before and I'm really not sure if my code will work properly on all devices. Therefor I want to ask you to speak from your experience and knowledge and tell me what problems may appear on some special/any devices.
After some reading, I decided to go with as simple as I thought way and used simple rule:
#media (max-width:504px){
/* My style for mobile/ipad etc */
}
#media (min-width:505px){
/* My style for laptops/desktop etc */
}
IMO it is still better to write CSS for one of two display sizes, and then override the styles with media query. Fo ex. mobile-first approach:
#some-element { font-size: 2em; }
.container { color: red; }
.another-class { width: 100px; }
#media (min-width: 505px) {
#some-element { font-size: 1.5em; }
.container { color: blue; }
}
This way have two advantages:
You dont have to write the same code for two media queries, only overrides (you dont have to duplicate .another-class for media query).
Ancient browsers without media queries support will render site using styles that are not in media query.
Artur answer is correct, old browsers like IE7 don't support media queries, but media queries design is intended mostly for moderns browsers, so creating a fallback CSS isn't exactly required unless you want to, mostly because some CSS properties (hiding certain elements with display:none for example) won't work so your intended web design will lose purpose. Each web designer have their own way of writing CSS, but I prefer this method:
body, html{
width:100%;
margin:0;
/* Base CSS that will affect all resolutions */
}
#elements-up-to-320px{
/* CSS for elements up to first media query */
}
#media (min-width:320px){
/* CSS for elements from 320px and up until next media query */
}
#media (min-width:480px){
/* CSS for elements from 480px and up until next media query */
}
This way it's more understandable and last CSS media query will apply for higher screen sizes.
#media is good if you want to create a CSS-Gridsystem (for example) It takes a parameter with the min-width or more. So you have the possibility to set different CSS-Propeties for different Screen-Sizes.
Links:
SELFHTML
w3schools
Hope that helped you :)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to reduce the the width by which col-md-offset-1 of bootstrap assigns margin-left at a certain place. I would prefer this to be done by using LESS.
You don't really need Less for this since the solution there would be exactly the same as in pure CSS. Just override the corresponding property:
#media (min-width: 992px) {
.col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
In Less you could modify the method Bootstrap generates all such offset classes (by overriding/cascading these mixin and variables) but that would be an overkill for that tiny change you actually need).
#seven-phases-max wrote:
You don't really need Less for this since the solution there would be
exactly the same as in pure CSS.
I don't agree with that. Bootstrap uses Less to help you code DRY (don't repeat yourself). When your start hard coding your changes, your changes will break in future when you change some of the framework parameters.
Changing the behaviour of the .col-md-offset-1 depends on the #screen-md-min variable which sets the min-width for the media query, see: http://getbootstrap.com/css/#grid-media-queries
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
So in my opinion your Less code should look like that shown beneath:
#import "bootstrap"
#media (min-width: #screen-md-min) {
.col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
Using the above you should notice that you can not recompile Bootstrap without running the autoprefixer, see: http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/
To keep you changes future proof you should also consider to make your modification only be applied for the situation where you need it (and do not change the properties of the predefined .col-md-offset-1 itself). For instance by using a unique parent of your grid;
html
<div id="maincontent"><div class="container"><class="row"><div class=".col-md-offset-1">
less
#import "bootstrap"
#media (min-width: #screen-md-min) {
#maincontent .col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would like to know how you are handling Responsive design combined with SCSS in SASS. The main question is about media queries.
1) Are you writing media queries straight inside styled element using breakpoint mixin like this:
.element{
width:40%;
#media screen (min-width:700px){
width:100%;
}
#media screen (min-width:1000px){
width:50%;
}
}
// CSS
#media screen (min-width:700px){
.element{
width:100%;
}
}
#media screen (min-width:700px){
.element2{
width:50%;
}
}
2) Or are you writing them to special separate partial file? Like this for instance:
/* _responsive_wide_screen.scss */
#media screen (min-width:1000px){
.element{
width:50%;
display:inline-block;
}
.element2{
width:20%;
}
}
More faster to do is probably example number 1, but the problem is that the media query statement is generated for each element and the CSS file size is getting bigger and bigger. Should I avoid this approach?
I’m using example number 2 but sometimes is not so user friendly to switch between the files.
Thanks
My own preference is to use the first approach you showed. I like the benefits it provides in terms of localizing media queries to a specific element; I find it speeds up responsive workflow and encourages making adjustments where they are needed for the design/layout rather than just at specific breakpoints.
For large projects where it's worth the extra time, I then go through and consolidate media queries with identical min-width and max-width values. Having to do this secondary optimization is certainly a drawback of this approach -- I am hopeful that an upcoming release of Sass will automate this feature for us.