Is there any way to progressively resize using media queries rather than at pre-determined widths? E.g.
Currently I have something like:
#media screen and (max-width: 1024px) { }
Now this will ONLY resize when the window hits that magical 1024px boundary... however, I need it to resize at every stage, not just 1024px.
If the user makes the window 10% narrower then the images and font sizes also need to reduce by 10%.
Is this possible with media queries or am I going to have to go down the JS route for this?
Thanks.
Just make the entire layout flexible. You could then resize the images using width: 90%; (or any value you like), Or use max-width:90%; if you don't want the image to upscale.
Gradually resizing the text is not possible using media queries or css, but you really shouldn't do that. People with smaller windows wouldn't be able to read the text, and people with big screens will have to sit back because the text is to big. Not to mention people using a mobile phone.
Yes, you can do progressively resize using vw, and vh. Do take note of the browser support though.
.h1 {
font-size: 50vw;
}
Related
What's the best way to
achieve going from a menu like this :
to this when screensize reaches a certain width :
So basically change certain texts to icons.
Is the only way pre-defining it and changing the display property in css from none to block ? or is there a better way ?
You got it. I would start by in the correct order list all the elements for mobile and desktop together then display:none the ones you want to be hidden on desktop and go from there. Could do it with JS but that's a lot more work and could look wonky on load.
+1 on what #MPortman said, it'd be better to have a clear idea at the start;
I would use CSS Media Queries to do that.
You can for istance just use the display:none starting from a specific width.
The web inspector is useful to see some "common breakpoints" but you don't have to target #media rules at specific devices, it'd be better narrow to your desktop browser window and observe the natural breakpoints for your content.
Media queries are a good way to make responsive pages, you can hide or show elements from a certain width of the device used (mobile/desktop for example).
You can use them to set a minimum width and a maximum width.
For example:
/* If the screen size is between 768px and 900px (included), hide the element */
#media screen and (min-width: 768px) and (max-width: 900px) {
div.example {
display:none
}
}
Will hide the element on a screen bigger than 768px and 900px.
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 7 years ago.
Improve this question
Now, I understand how "breakpoints" work - when the browser window reaches a certain width, the element within the queries changes. Now, here is my question:
If I start designing a website, and start adding styles for how I want to look on a mobile device, when the design is finished and I want to expand on it, what's the effective way on doing it?
At the moment, all that I can think of is adding a queries with a higher min-width breakpoint, and then paste the CSS from the code that I already made and start making changes respectively, within the queries. I have a strong feeling that this is not the correct way of doing things, so this is why I am asking for help. Thanks!
You have the correct approach when it comes to making a design and thinking mobile first. Now what you need to do is think of how it will be when you resize it to large device widths.
There are a lot of things you can look into, many people could suggest you to look at frameworks such as Bootstrap just to understand how they use media queries to achieve many things. My advice is to use as little media queries as you can. Try to support at least two device widths: mobile/tablets and desktop. Since mobile/desktop can be interchangeable and new devices are always coming out, a consistent design is best. However you can safely support mobile/tablet/desktop if you take the time to do so properly.
Now, I will try to keep it very simple for you and introduce the most basic way to do media queries right and expand from there.
Let's begin with the most important yet simplest building block of responsive web design: a container element. This container element is to be used for the content in your website, the content is for you to choose to imagine upon, since these containers will need to expand from device width to device with accordingly.
Navigation bar example:
.navigation-bar-container {
position: relative;
width: 100%;
min-width: 320px;
max-width: 100%;
height: 100px;
}
Check the above code its so simple and straight forward, what does it do? I can imagine it will hold all the elements within a navigation bar. It can certainly be used in more than just that way, but for now all we care about its a navigation bar.
It's minimum width is 320px, because the smallest screen you need to support may be 320px wide (iPhone anyone) so there is no need to shrink your element below that.
Max width is interesting. Currently the nav bar's max width is 100% because I said it is... no, that does not make any sense. Why is it 100%? It is because I want to make it always expand to the full width of the screen, regardless of the screen width. That is it's default behavior.
Now try and think of what will happen to your navigation bar's width when you are in a different screen sizes, such as mobile devices. What will happen with the elements, will they shrink with your container? Will they even fit when the screen size is too small? Enter media queries.
Full desktop widths: approximately 769px or above... this is subject to change of course.
The max width is 100% and width 100% means it will adjust to whatever the screen size is. Default behavior doing its thing, yes!
Tablets: approximately 421px to 768px... this is subject to change of course
If your elements will not fit into all tablet sizes and make your navigation bar look weird, yes try it throw some divs and stuff in it and shrink it, then what do we do? It is time to make them fit by using the good old media queries:
#media screen and (max-width: 768px) {
.navigation-bar-container {
display: none;
}
.sliding-navbar-container {
display: block;
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 320px;
}
}
Yes I did not make them fit at all. I swapped the good old navigation-bar-container width a different one. Classic example of what is good and safe when using media queries. Instead of breaking your head over how to fit these elements, spare no hesitation my friend, just swap your navigation bar for another that will work on smaller devices in there.
Note how the new navigation bar actually accounts for its width 320px, it will sit absolutely positioned to the top and left of the screen, doing a good job there. How to make it slide in and out, pop up, look neat is another question entirely! Don't ask unless you are curious... back to media queries!
However if we are speaking of an element which will change, let's say it always occupies 100 percent of your screen width, and then shrink to occupy half of the screen width for tablet/landscape phone devices only, then you may want to use a media query like so:
#media screen and (min-width: 421px) and (max-width: 768px) {
max-width: 50%;
}
Very small and simple change. Max width is interesting because it controls your inner width, which is by default set to 100%. This change will force your element to adjust to 50% of the screen width while still resizing to adjust to 100% of the new element width. It could also be a good idea to make it max-width: 50vw since it will adjust to the viewport width instead, thus making it responsive even when dealing with widely different viewports.
And so, we come to our conclusion TLDR:
Use as little media query sizes as you need, because if you need a lot then you are doing it wrong, seriously!
If you need a lot, cannot avoid it, then get to know Bootstrap, let other people worry about the media query nightmares.
Think in containers, your elements will sit and move around in them. Think of how these containers will flow from desktop to mobile and vice versa. Putting thought behind this is crucial as it is the source of your responsive behavior and should be the focus of your media queries.
Although not covered here, you can easily look at media queries and font/image examples. Responsive fonts and images are a crucial part of your content and they as such should be accounted for with media queries. Background image changes, better readability depending on the device you are on, all of that matters and can be simplified via media queries.
I put this last here because IT MATTERS A LOT use SASS/SCSS and save yourself a ton of trouble when working with media queries (and everything CSS). Look into mixins, variables, partials which you can use along media queries. You will love it if you didn't know about it and start using it now.
Need more? Fine enjoy Google's responsive web design fundamentals
Good luck!!!
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I've found StackOverflow extremely useful so thanks for any help in advance.
On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:
stay in position consistently without jumping around due to browser size (for example, on the mobile phone, it gets misaligned or there's white space where there shouldn't be)
the 'Verify Anyone Offline' doesn't resize properly even though I set it in em
the button looks strange on a mobile device
What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?
Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.
Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.
Example - CSS at different widths:
#media screen and (max-width: 600px) {
/* add some CSS here for 600px maximum width*/
}
#media screen and (max-width: 960px) {
/* add some CSS here for 960px maximum width*/
}
To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.
If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.
I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.
In the future, try to keep your questions more focused. :)
give
background-size:contain;
and this may solve your problem, because it will auto adjust size by contain!
I am aware of the CSS 3 units vw, vh and vm, which seem to be useful for making elements that have their box sizes and text sizes relative to the browser's viewport size. However, sadly, these are not well-supported with the current major browsers; only Internet Explorer 9+ does.
What other methods can I use to do things like CSS font-size properties that scale with the viewport? I would like to avoid JavaScript and/or jQuery solutions if possible.
Doing a 100% scalable website is possible. As Rev said, you can do this by using percentage values, but it is tricky.
The better option is to utilize #media queries. These allow you to apply CSS rules to a page only under certain conditions. By using media queries to detect the device width and/or the page width, you can apply fine tune control over how your site looks AT different viewport sizes. For instance:
#media screen and (max-device-width: 960px) {
font-size:14px;
}
#media screen and (max-device-width: 480px) {
font-size:13px;
}
Now, the above example is rather trivial and contrived. For a deeper understanding of what you can accomplish with media queries, I recommend you view the W3C spec page. Some of the most powerful are the width, min-device-width, max-device-width, portrait|landscape, and print queries.
As a side note, make sure to include these styles at the bottom of your CSS, so that they dont get overwritten by default styles.