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?
Related
Working on this site: https://redheadedroux.com/
Using Sprinkle Pro Theme
The logo image is automatically designed to size down to 150px in height. I added this code to make it larger:
.header-image .site-title > a {
height: 300px;
}
It looks perfect on the desktop view but now when I view the site on a mobile view, I'm left with large padding space between the announcement/hamburger menu and the first widget. I don't want there to be all of that empty space between the logo and everything else.
I've tried adjusting things in the #media areas already within the theme itself, but nothing seems to work. I feel like it's a matter of selecting this height for a different #media area? But I can't seem to get it to work. Any insight?
Thank you
Photo of what it looks like on mobile view:
Checking your site I can't see any problem at all. Everthing works as You have decided.
If you have the rule:
.header-image .site-title > a {
height: 300px;
}
and you are not happy how it looks on mobile, change it with media queries
like this:
#media only screen and (max-width: 600px) {
.header-image .site-title > a {
height: 120px;
}
}
Just use the window width when you desire to use the change of height and be sure the rule is placed at the bottom of you css sheet.
Figured out my issue. I ended up applying this specific code:
#media only screen and (min-width: 600px) {
.header-image .site-title > a {
height: 300px;
}
}
It left the logo sizing alone for any screen size below 600px. But for anything 600px and above, it made the logo height 300px, which is exactly what I wanted. The padding around the logo image on mobile devices is no longer there.
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()
Let's say I have a div on a webpage that displays on a desktop at 1000px width. Let's say I want that div to display at 100% width in portrait mode on all phones. What would be the easiest way to accomplish this without using Bootstrap?
.yourdiv {
width: 100%;
max-width: 1000px;
}
This rule would work pretty well in situations like these: It makes the DIV 1000px wide if the screen is wider than 1000px, and makes it 100% wide on all screens which are less than 1000px wide.
Johannes answer is really awesome but if you need to have more control over what's displayed, you can always use media queries.
Example: hiding a sidebar only when the screen width is <= 600px:
#media (max-width: 600px) {
.sidebar {
display: none;
}
}
You can find out more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
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.
Experts,
I have a page containing thumbnails:
http://ulrichbangert.de/heimat/Bad_Harzburg_Oldtimertreffen/2015-04-05_Bad_Harzburg_Oldtimertreffen.php
My intention is to reduce the size of the thumbs to 50% for a small screen so that more of them fit on the screen. I already have a solution by JS but would like to use CSS instead. My latest approach uses scale:
CSS:
#media only screen and (max-width: 768px) {
a.th200 {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
display: inline-block;
}
}
HTML:
<img class="th200" src="2015-04-05_Bad_Harzburg_Oldtimertreffen_01_th200.jpg" alt="Oldtimertreffen in Bad Harzburg">
Scaling down works fine so far as Firebug indicates but there is a lot of space between the thumbnails so that the disired effect is not achieved. What causes this empty space? How can I remove it?
I would use a DIV as a container and then a DIV for each thumbnail, and scale the thumbnail DIVs down. If the images inside are 100% the size of the DIV then they will scale down with it. This will eliminate the spaces you are seeing at the moment.