If you use a meta viewport tag as below to tell a mobile browser to scale its content as if its being viewed on a 1200px wide display (the actual width of the browser in question is 500px)
<meta name="viewport" content="width=1200px;" />
and then also use a media query like
#media only screen
and (max-width : 1200px) { /* NEW CSS */ }
Which would get used? As with out the viewport tag the media query = true, so the new css should be used, but the viewport is saying the device is 1200px.
NOTE: im using max-width which equates to the browser window width, rather than max-device-width which equates to the device width
Related
I made a small website where width of certain elements are given in vw. It looked all good in my laptop. But when viewed in a 1920 screen, I could see the content is over stretched. I want to know if there is a way to stop viewport width and viewport paddings I have used in my website to stop stretching the elements after a while.
You can achieve this by setting max-width: value to your container in you css file
Also to set diverent styles after certain screen width you can yuse media query
#media(min-width: 1000px){
//your style
}
I'm working on a Wordpress site where I have a background image that serves as my logo and my actual header image is transparent. Due to the way the header image resizes on mobile, there is a big empty space between my logo (the background image) and everything below it when viewed on a phone. It looks great on desktop & a tablet.
Is there a way that I can resize the height of that transparent header image only on a phone, without messing up the size of it on desktop or tablet?
You can view my site here, if needed.
Would be easier to show in actual code but you can adjust the sizes and only make it impact the sizes you define with media queries - read more about here
If you look at the screenshot, you can see that the a tag had a height of 150px. If you regulate it a bit, the space between logo and menu won't be as far.
Here is an example that will make the new change of height on the .header-image .site-title a only on sizes less that 450px.
#media screen and (max-width: 450px) {
.header-image .site-title a {
height: 100px;
}
}
max-width means when ever the screen is under 450px, min-width would be over.
This was just an example, you can change it to whatever you prefer and you can of course add multiple media queries.
I'm creating a website and it's not fully response - I accept it.
I want to set minimum width for overall page to something like 1000px and display horizontal scrollbar if screen width is below this. I tried to use:
#media (max-width: 1000px) {
body {
min-width: 1000px !important;
}
}
But it's not working, scrollbar appears but my DIVs getting messed. I'm using Bootstrap 4 with sass, is there any way to force this behavior?
Of course, I'll create fully responsive site later, but now I want to archieve this for mobile and tablets. Currently, my navbar under 1000px is totally broken.
EDIT: Example codepen with my navbar code, under 992px it gets broken: https://codepen.io/anon/pen/vJgGma
The elements in your nav always hit 100% width below 992px so they're going to wrap no matter what you do.
You need to define widths for your nav elements below 992 if you want it to stay at 1000px wide. Try setting them to percentages that equal 100% and you should be fine.
I have laptop screen with resolution 1366*768 pixels , that mean screen width is 1366 pixels and height is 768 pixels , that is fixed when i set my screen resolution to 1366*768, If i have a webpage which have css property
#media screen and (max-width:1366px){
//css1
}
#media screen and (min-width:1361px) and (max-width:1500px){
//css2
}
That mean if device 's screen has a width of 1366px or lesser css1 will apply to that page , and if the screen is larger than 1366px then css2 will be apply , . So for my laptop screen css1 should be applied because it has screen width of 1366px .
At ZOOM:100% , this works fine , But if I zoom out , css2 starts applying , I can't understand how this can be happen , my screen width is fixed, So how Zoom out can increase my screen width , .
I become very confused , I am trying to understand this screen resolution, pixels, zoom, for very long time now ,But can't really understand how they works , please help#
Media queries limit the layout width and if this value is reached (for example by reducing the window, or when viewed on a device with the specified size) is already used by a different style. that is how media queries should work.
When you zoom out you're increasing the viewport size. When media queries refer to screen they're talking about the browser's viewport width, not your physical screen's width.
I am building a site that uses a very large header image. When the site is viewed on mobile I would like to scale that header div's height to be half of what is is on desktop.
What is the best way to do this with bootstrap 3?
A simple media query will work:
#media all and (max-width: 480px) { // or whatever size you want to target
// change header size
}