I have a website. The content is set to 960px wide and devices that are wider than that see the solid colored body element. I am trying to add a background-image to that body, but I only want it to load on devices that can see the body, so that other devices don't need to waste time loading it if they can't see it.
For example, my viewport meta tag is set to a static 960px (I know it's not recommended), so phones won't be able to see the body because they are automatically scaled to 960px in width.
How can I display the background-image on only devices that are more than 960px wide, using the #media in the CSS?
How can I display the background-image on only devices that are more than 960px wide, using the #media in the CSS?
Do you mean this?
body{
background:url('http://mobilemarketingwatch.com/wp-content/uploads/2016/01/Is-Google-Searching-for-the-Next-Big-Thing1.jpg');
}
#media only screen and (max-width: 960px) {
body{
background:none;
}
}
DEMO
If you resize your browser the body background image will gone.
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()
On this gallery page the iframe is styled:
iframe {width:100vw;height:84.5vh;}
#media screen and (min-width: 600px) and (max-width: 999px) {
iframe {width:100vw;height:81.5vh;}
}
#media screen and (min-width: 1000px) {
iframe {width:100vw;height:77.5vh;}
}
Colorbox is used to display a larger version of the image. I assume Colorbox positions the image in the middle of the window. Colorbox works fine on desktop but on mobile it seems there is a different understanding on what height the iframe is and the large image is displayed waaaay down the list.
I'm not sure if it's incompatibility with vh units and iFrames, a bug with Colorbox or something else.
(Note that this problem doesn't appear in the inspector - only on an actual mobile device)
After using the mobile safari inspector to directly see what was happening on mobile I worked out the solution was to add:
body, html {
overflow: scroll;
height: 100vh;
}
This made Colorbox recognise the proper height. However, I then needed to add a media query for desktop browsers who don't need the overflow (adds additional scroll bars if they're there):
#media screen and (min-width: 1000px) {
body, html {overflow: auto;}
}
Will need this for the scroll to work as expected - I couldn't find anything recent to tell me there's a better way of doing this?
-webkit-overflow-scrolling: touch;
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 have a website where when the screen goes above 1400px; the website no longer expands. However, I also have a floating element. the navbar is floated to the left and scales down in size with the page. However, I don't wamt it to style if the screen size gets larger.
If someone views my page above 1400px screen resolution it works and does not move. However, if someone views the website and zooms out increasing the viewport size not the screen size it stays stuck to the left hand side and distorts.
I want a div to display:none if the screen size or the viewport size reaches a maximum size of 1400px;
I need compatibility for modern browsers and mobile devices.
you can try this...
#media screen and (max-width: 1400px){
div {
display:none;
}
}
#media (min-width: 1400px) {
body {
background:red !important;
}
}
works for me :)
EDIT: sorry missed the part about zooming the page. i'm not sure viewport is supposed to work like that?