I know that media queries are used to create responsive layouts.
However they seem redundant; can't we achieve all we need using %?
Defining layout using % help create a fluid layout, NOT RESPONSIVE layouts.
Media queries help you to define different style sets for different screen sizes.
Also with Media Queries, you don't have to be limited to just heights and weights, you can control more than sizes.
Example below creates different background for different screen sizes:
#media only screen and (min-width: 320px) {
body {
background: red;
}
}
#media only screen and (min-width: 780px) {
body {
background: blue;
}
}
Can % do that?
No
Percentage-based layouts are fluid-- the widths of their components can change as the viewport size changes. That does not make them responsive, however.
Responsive layouts have different CSS applied at different viewport sizes. For example, two blocks that each have 50% width and float next to each other when the viewport is large might change to have 100% width and stack on top of each other when the viewport is small.
Related
Currently having issues scaling the text down to a mobile size, as the current parallax image has a text element on top of it and half the text is off screen when browser is resized or on a mobile device. I can move the text around, but struggling to resize it to fit on a mobile screen.
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 {
font-size: 1% !important;
margin-left: -300px !important;
(.vc_custom is the element name)
Page in question- https://www.xordium.co.uk/your-cloud-journey/
Yes, You can New fonts properties are there please see the link below
https://css-tricks.com/viewport-sized-typography/
First of all, your css rule is not applied to the text in the header. See this image. Try to select directly the span:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:...
Or any other method.
Next, you should use Viewport Sized Typography for better and more accurate reponsivity. For example:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:6vw;
...
The result should look like this.
Not the best look, I know, but try some other numbers until you find something that fits correctly.
Try using other units. eg viewport width.
Try setting the text to eg. calc(16px + 2vw);
Play around with the pixels or viewport width values until you find a solution that scales however you'd like.
check this CSS Tricks article Fun with Viewport Units.
Also check out the CSS calc function. Its quite useful A Couple of Use Cases for Calc()
I would like a row of three evenly sized circles to appear within my Bootstrap team section. Instead, the circles currently are different sizes depending on the ground truth images, which means the text below the circles (profile pictures) is also not starting at the same line on the webpage.
http://www.bootply.com/LaIxZFaQLO
Any idea what I can do to ensure the circles are always exactly the same size and adjust according to the display?
You can make sure all your images are the same width and height from the get go, then all it would look like is this (no extra css)
http://www.bootply.com/ebWjKhRsN2
OR
You will have to make them all the same size via css
.team-member img {
width: 330px;
height: 330px;
}
when you resize the screen, then you'll have to adjust the height and make it the same as the width via media queries
e.g (in medium sized screens, the width will be 220px, so:
/* md */
#media (min-width: 992px) and (max-width: 1199px) {
.team-member img {
height: 220px;
}
}
I'm using CSS #media to adjust my website depending on the screen resolution
Whether i switch to a resolution with the height of 768 or 720 it will still act as if i'm my screen resolution has a height of 720px
.group-container{
min-width:1210px;
max-width:70000px;
width:1210px;
margin-left:2.5%;
height:87%;
margin-top:1%;
}
#media only screen and (max-height: 768px) {
.group-container{
margin-top:150px;
}
}
#media only screen and (max-height: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
For the first media query you should use also a min-height set to 720px and max-height set to 768px
And if you try to use (max-width: ...px) instead?
#media only screen and (max-width: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
This way you won't rely on your height, but the width of the window it's being displayed on. example:
your resolution is 900x1600.
Resizing the height of the window wouldn't have much effect. If you where to use max-width, that way if you resize to 600x1200 for example, it would have more effect.
EDIT: The reason why I think you should use is, the height doesn't really matter when it comes to responsive design. The height might change but it will always be scrollable, so using the height will have little to no effect.
The width of the device DOES matter, the width is important when it comes to responsive design (assuming your website isn't horizontally scrollable). It would be better to create query's based on the width of the display, then to rely on height for that matter.
In general, I want my body div to be 60% width of the window size. But there are some exceptions.
On a large monitor, this gets too big, so I have set a max-width of 800px, like so:
#lbp-text-body {margin-top: 100px; width: 60%; max-width: 800px; text-align: justify}
This works pretty good, the text adjusts within a certain range, but at certain max threshold holds it shape.
Now I want to do something similar for small window sizes.
I've added 'min-width: 300px;' and this seems generally seems to override the width 60%, However, if the screen size is less than 300px, the user will have to scroll horizontally to see part of the text.
I would prefer for the actual width size to change 90% or 100% after the viewer size hits the 300px threshold.
Any ideas on how I could do this?
You can use a media query to achieve this: JS Fiddle Example
#media only screen and (max-width: 300px) {
#lbp-text-body {
// Whatever Styles you want to have at 300px or less
}
}
You can also use media-queries to have specific styles if the window is greater than a specific width using min-width.
#media only screen and (min-width: 800px) {
#lbp-text-body {
// Whatever Styles you want to have at 800px or more
}
}
As a side note, you will want to be sure you have the correct viewport meta tag for media queries to work properly on each device: Viewport Meta Tag
I woul use a media query to determine the size of the screen, and change the % width based on that:
#media (max-width: 300px) {
width: 90%;
}
The browser will read through your existing CSS and apply the styles you described in your question. The media query tells the browser to apply this new width to any screens that fit the criteria - a screen that is at most 300px wide. If you have other breakpoints (in this case, widths) that you would like to target, you can definitely use more than one media query at a time.
See: detect browser size and apply css for every resolution
also: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I've seen many WordPress themes that adapt to mobile interfaces/smaller screens using only CSS. Any ideas on how it's done?
For example, the theme Foghorn has a sidebar that disappears in a screen less than 750 px wide. I've looked at the code and I'm very sure that it is done with CSS.
I'd like to employ such a design in a website I'm making.
Thanks for any ideas!
You need to use media queries in your CSS.
Example:
#media screen and (max-width: 750px) {
.someClass {
display: block;
}
}
Everything inside that #media block will be applied only if the screen width is 750px or smaller.
You can also do things like min-width or combining both.