Foundation 5 is toted as being mobile-first, but for a web-app that is desktop-only I need to disable the responsive behaviour that kicks in when shrinking the viewport size.
We're currently using a very minimal grid-only Foundation setup without much customisation.
Is there a way to set a specific app width without having to get the Foundation _settings.scss file to alter the #media queries, as suggested in this post?
If you still want to use the grid, the easy way to disable responsiveness is to remove the Viewport tag in the header:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And then after Foundation is called in the SCSS or CSS, .row will need to be set to a fixed width rather than max-width:
.row {max-width:none; width:960px;}
Related
I am beginning a landing page for a client. I have made it responsive, but when I open it up on a mobile phone, it pops up large and cuts off the page. I have to pinch the screen and zoom out in order to get the full content. How can I code it to where it is already just 100% there without having to zoom out?
Whether use CSS Media Queries or Boostrap framework which will provide you with predefined classes to add to your HTML elements in order for them to adapt on different screen sizes.
Double check that you haven't hard-coded widths for any images, divs or other elements on the page. Instead use relative sizes when you can, eg width: 50vw; . Setting max-widths is sometimes necessary as well, eg max-width:100%;
As per the earlier suggestion from Blueware, media queries will help you set styles based on the viewport or window size.
Also check that you have included a viewport meta tag in the head of your page:
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
If still no joy, post some code or a URL.
Good luck!
I am making my webpages responsive but struggling to keep elements on the page not to go over each other. I am quite new to web development so I don't even know how to approach the issue. I would really appreciate some general suggestions at this stage to help me to get my head around it and move forward.
A few suggestions to get you started.
Begin by including a viewport meta tag in the head of your document, this will stop smartphones and tablets from scaling your page to fit the viewport (screen)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
Use CSS to define element sizes because then you can restyle elements at different viewports. Also try and avoid including hard pixel dimensions for any elements because they will likely cause problems on small screens, opt for a width of say 100% over 960px
There will be times where you need to change the layout on small screens. For example two side by side images, each with a width of 50% may not work on a smartphone. When this happens, use media queries to change your layout
CSS
img{
width:50%;
height:auto;
}
#media screen and (max-width:400px) {
img{
width:100%;
}
}
Hope this helps get you going!
Update
See if this is closer to what you are after (note the placeholder images may be slow to load):
live view - http://s.codepen.io/panchroma/debug/ZOqgzx
edit view - http://codepen.io/panchroma/pen/ZOqgzx
The important bits are:
in your HTML I've removed the inline styling you had for the images and moved it to the CSS starting at line 65
starting at line 134 in the CSS I've built out the #media styling for narrow viewports. Note that I've collapsed your 2 column layout to a single column layout as well. This detail is completely optional but gives you more room to work
at line 4 in your HTML you have <link href="index_responsive.css" rel="stylesheet" media="screen and (max-width: 800px)" /> . Technically here's nothing wrong with this, though it's more common to use the one style.css file and include everything in that one file, and the #media screen ... statement and styling in that style.css file
How can I make inline Images ( Images used in the text of article ) responsive in Drupal 7.( I use Wysiwg and CKEditor). I can make Image Field files responsive with Adaptive Image Module but apparently it doesn't have any option for doing such action for inline images.
Other module like Picture and some thing like that make Image styles for different styles of theme( breakpoints indeed) but I want to make may image adaptive with all resolutions in other word I want all of my images be fluid, not conditional.The http://www.fastcompany.com have the best image styles in my opinion and I want exactly this behavior for my project.
For more information I studied all forums in Drupal.org about this issue but I can't find any reliable solution.
TNX
Add this to your css (make to fit your own css rules for wanted images):
img {
width: 100%;
max-width: 100%;
}
I'm trying to set opacity for extjs (4.2.1) panel (whose id is myPanel) as Ext.get('myPanel').el.setOpacity(0.65). It works fine in firefox and chrome but not in IE 8. The ultimate goal is to make the panel transparent so that the user can see through it. Could any one please help me with this...
Ext will simply apply the CSS property "opacity" or alpha transparency to an HTML element. In IE8 this is almost in no case supported.
You could however use a plugin or hack to make IE 8 compatible with it.
Check http://css3pie.com/ or http://modernizr.com/ for example.
Also check http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/ for an example of your issue, and how it is solved using PIE
When you dont want to use 3rd party plugins, you can also try this:
Add the following rules to the CSS of your property
/* IE8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */ filter: alpha(opacity=50);
You can also do this with Ext.js using Ext.get('myPanel').el.setStyle()
e.g.
Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');
Finally..after breaking my head for as while..I came up with 2 solutions...
1) Apply x-panel-ghost (which is an extjs in build css applied during the drag process) for baseCls or componentCls gave the transparency. But all the other default css for a extjs panel are lost and so we have to manually write them up..
2) The best solution would be to set an image which is made transparent (through photoshop or something) as a background image for the panel header and body and apply it to the cls config of the panel as below:
In panel:
cls: 'transparency',
In css file:
.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}
And in the same way, for the body as well..
Hope this helps someone...
I'm trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there's no zooming, and that you can't scroll the view horizontally. This is the meta tag I'm using:
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
On my iPhone when I load the page, it seems to look okay:
But I can scroll horizontally, so that it looks like this (this is as far to the right as I can go:
When I swing it into landscape view, the page renders as expected, locking the horizontal scroll position.
I'm trying to figure out how to make this page not scroll horizontally at all. Is it possible that I've got some page element pushing the content out? I wouldn't even expect that to be possible with a correct viewport set, but I'm grasping at straws here.
Is it possible that I've got some page element pushing the content out?
Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.
So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.
NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.
body { overflow-x: hidden; } also works.
Late to the party here, but I just had a similar problem where I had horizontal scrolling across an iPhone 5, the site was effectively showing as double the width, with the right hand half completely empty.
In fact, I just needed to change the viewport meta tag from:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />
to:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
Adding the 'initial-scale' locked it down so that it only scrolled vertically as expected.
This will prevent any elements pushing content out:
body div {overflow: hidden ;} # media queries
Try this variant:
html, body{
overflow-x: hidden;
}