I'm working on a website and I'm trying to make it mobile friendly by including <meta name="viewport" content="width=device-width"> in my html.
Unfortunately I have an element that needs to be larger then the device width. I was going to use media queries to hard code values for this element on different screen sizes but it seems like I am not able to override the elements width.
This is the element whose width I want to override:
<div id="menu_bar">
Currently the only way I can override this elements width is by doing:
<div id="menu_bar" style=" width: 1024px;">
However if I do:
<style>
#menu_bar {width : 1024px;}
</style>
<div id="menu_bar">
it does not work. Even adding !important does not work. I need to be able to do it the second way because I need to use media queries.
Just for reference I have the menu bar as a ruby on rails partial because on every page of my website.
Any idea how to override the width of the menu bar so I can use media queries?
Any help is greatly appreciated.
Try going to http://atmedia.info/ -- it will scan your device (refresh to rescan it in portrait and in landscape) - it tells you a bit about media queries that match your device. Assuming you have not already solved your stuff yet.
This meta tag combo seems to help me.. and I use media queries to match devices in min-width and min-height (max as well)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobileoptimized" value="0" />
Related
I'm working on a web application that's meant to be used exclusively on phones (of various sizes). The application includes various buttons that I resize based on the user's screen size so that we maximize the use of horizontal and vertical space.
I have specified a few media queries for responding to both the horizontal and vertical layout changes using tailwind (see below):
screens: {
'sm': '340px',
'md': '360px',
'lg': '385px',
'xl': '640px',
'2xl': '1024px',
"tall": { 'raw': '(min-height: 740px)' },
"vtall": { 'raw': '(min-height: 800px)' }
}
These all work when looking at the display on my desktop with dev tools. The view is changing based on vertical and horizontal size changes.
The issue is when I use an actual mobile device, I notice that my application is consistently ignoring the vertical media queries.
I've isolated the issue to this line:
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height"></meta>
When I make my line...
<meta name="viewport" content="height=device-height"></meta>
The vertical media query works, but not the horizontal.
But the moment I add the width specification back in... the vertical media query doesn't work, but the horizontal one does.
Any ideas?
I'm not sure if it would make any difference, but you don't need to close the meta tag, what you want is
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
Can you start a codepen or jsfiddle that illustrates your problem?
I just create grid based on mobile first (old style, not using flex). When I try my result, the width of element when on mobile is not work, it overwrite width from min-width: 768px. Here is the image
I've tested it on other element, and it's not have problem. Check out this image
why it's have different result, I'm using same css. Please help me :)
I guess you have missed meta tag in head tag which specifically tells browser to take media queries css :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
I want to force browser, to set virtual viewport to a fixed value.
Typically the meta viewport in responsive page looks like:
<meta name="viewport" content="width=device-width, initial-scale=1">
i found a solution to set width to fixed value:
<meta name="viewport" content="width=1200px">
But unfortunately it works well only in chrome. What i want to get is with width lower than 1200 i want to turn on the zooming functionality.
Does anybody knows any other trick to do it?
EDIT
Actually the problem is, that i managed almost all layouts with bootstrap to achieve responsiveness. But client decided, that he don't want this page to be responsive, but make the width fixed regardless of device width and toggle horizontal and vertical scrollbars if needed.
What i am looking for is a realy easy warkaround, to do this without hudge style modifications.
Give this a try in jQuery:
if(screen.width < 1200){
$("meta[name=viewport]").attr("content", "width=device-width, initial-scale=1, user-scalable=yes");
}
have been looking around for a solution to my query but haven't had any luck.
I have a website that I have designed with css responsive design.
I wanted to know if there is a way to use viewport to make a device such as an ipad
view the website look like that of a larger width device.
Essentially I want to make these responsive elements now sit like they do on a desktop computer but on an ipad and other mobile devices.
Have tried things such as
<meta name="viewport" content="width=device-width, initial-scale=1> but no luck so far.
<meta name="viewport" content="width="1100"> seems to make all the content appear the way I want but aligns the site to the left not centred.
I've used #media queries for my css and now I want mobile devices to essentially ignore these responsive design elements and look like it does in a desktop browser.
Any help appreiated
Hope this helps, put this in your css.
<style>
#media ( max-width:110px) {
.yourmenu{
//do your css coding here, you may tweak the size
}
}
</style>
more here: http://www.w3schools.com/css/css_mediatypes.asp
I have my site :
www.emantiss.com
And when Im resizing the site the main image on the top not resizing with the site it self.
Just when im doing a refresh to the page the new size get in action.
Im trying alot of things with max-width and this code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
but it doesnt work for me.
If some1 can help me. it Will be great.
If you want images to be sized according to the size of the browser window you have to use relative value, i.e. percentual values. You can use media queries in your css file to limit this behavior to windows not until a certain size.
This is one quick way of doing it provided you are using the <IMG> tag:
CSS
.container{max-width-500px;}
.container img{width:100%;}
HTML
<div class="container">
<img src="YOUR-IMG-URL" />
</div>