I took a template which is responsive, but i want it to make it non reponsive from all devices.
I tried various sources , but what i get is to use
<meta name="viewport" content="width=device-width, initial-scale=1.0">
similar to that
I just tried the above way..
How can I do this
Your layout is a flexible and responsive layout. It uses a combination of Media Queries, Percentage Widths, and Flexible-Box elements. It will be fairly difficult to effectively restyle that page. You will need to essentially strip out all media queries (located in responsive.css) and change the outer-most elements to fixed widths. (For example change body to width: 1200x or whatever suits you) It will be tedious, but you will need to look at every width in your code. Hope this helps!
Related
In Bootstrap 4 change log I see
Non-responsive usage of Bootstrap is no longer supported.
What should that mean? How do I know when some usage is (non-)responsive?
You can disable the responsive in Bootstrap 3 by the following steps,
and this is the non-responsive usage you mentioned.
Source:
Omit the viewport <meta> mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
Here's the official example.
In Bootstrap 4, these might break the styles since the Non-responsive usage is no longer supported.
You can disable responsiveness of bootstrap by removing the following meta tag from website page.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the link : Disabling responsiveness
So I'm having an issue where my site has a lot of padding on the right side, making the layout load incorrectly. It appears correctly in on my desktop when the window is resized, but everything other than the header breaks when viewed on my phone. All of the relevant divs are set to a width of 480px, and I have the following tag in my header for the media query:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here are screenshots of how it appears on desktop and mobile, as well as a link to my mobile css page (the menu is open on mobile, but the extra space seems to affect it as well).
CSS Page
Edit: I'm now having a slightly different issue, where the margin has been added to the entire right side of the screen. I changed the pixel widths for many of the divs to 100%, as well as adding the <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> tag to the header. While they can no longer zoom out, you can just scroll the screen horizontally to find the padding. I'm also having an issue with my font-face tag, which no longer loads the header fonts. I updated the css file, so hopefully that shows why it won't work anymore.
Also, here's a link to the live site: Link
You shouldn't be setting explicit widths here, (at least not in pixels anyway) and from a brief glance at what you've posted I'd imagine that's where your issue lies.
Firstly, take off the widths that you've set for anything that you intend on being "full width" - remember divs are block-level elements anyway, so if you don't set a width at all, they'll have a width of 100%.
Secondly, take off any other pixel widths you're setting and change them to be percentages instead.
Thirdly, you'll save yourself a lot of headaches if you set 'box-sizing' to 'border-box' (I'd recommend just doing it on '*' for simplicity). This will prevent your padding and margin from being added on top of any widths you set as percentages; they'll be included in the box sizing instead.
Finally, I can't stress enough how important it is to get out of the mindset of things like "mobile" and "desktop". All we're talking about here is different viewport sizes. :)
If you have a live link you can share I'd be more than happy to have a proper look at this.
Add the following to your .css file:
img{max-width:100% !important}
I need to make it so Twitter Bootstrap doesn't go on responsive mode when I hit a resolution below 1024px. In other words, I want the horizontal sidebar to show up and not touch my rows or columns.
I have some conditionals with higher resolutions that I manage to achieve using the online LESS compiler, so I assume this can be done.
Which flag will I have to modify in order to do this?
This will help to avoid responsiveness on smart phones and tablets.
<meta name="viewport" content="width=1024">
Also remove initial-scale=1and other values.
Add a container for everything, and set a min-width.
<style>
.page-container {
min-width: 1024px;
}
</style>
<body>
<div class="page-container">
...
</div>
</body>
Probably posting much too late, but I was also attempting to do the same thing. If you follow these instructions via Bootstrap you will have a layout that stops being responsive below 1024px.
The Bootstrap docs have a guide for disabling responsiveness.
Omit the viewport <meta> mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
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'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" />