I'm writing a responsive wordpress site. I'm using the bones theme template. The grid system included worked pretty well on most of the site, but I found I needed differing number of columns on different screen sizes for a particular page.
To do this, I used a bit of scss that looks like this:
(base media query)
section{
display:table;
float:left;
margin-left:0;
width:100%;
}
(media query for 768 px and above)
section{
height:150px;
width:48.618784527%;
&:nth-child(3n+1), &:nth-child(2n){
margin-left:2.76243%;
}
&:nth-child(2n+1){
margin-left:0;
}
text-align:right;
}
(media query for 1030px and above)
.pracareas{
section{
width:31.491712705%;
&:nth-child(2n+1){
margin-left:2.76243%;
}
&:nth-child(3n+1){
margin-left:0;
}
}
}
And HTML like this
<div class="pracareas">
<section>... content</section>
<section>... content</section>
<section>... content</section>
<section>... content</section>
</div>
This works great on desktop browser and Android. But on safari I get something like this:
What's really strange is that if I refresh and/or rotate the ipad to portrait or vice versa, I get this:
But if I click on a link leading to this page or visit it directly (typing into the url bar), the layout is messed up until I refresh or rotate.
I'm probably going to abandon this approach and go for fixed number of columns above mobile because this seems really messy. But I thought I'd ask since it is only not working on a single browser.
That's because not all browsers render decimal values of width in percentages the same way.
Another approach could be to set breakpoints with media queries in order to target different devices.
Also try to round a bit those values and see if you manage to get an acceptable result.
See this: Are the decimal places in a CSS width respected?
Browsers handle percentages differently, it would not be wise to put too many decimals places straight into the layout. Browsers either round up or down, so you can try to round it up and see if you find a solution.
Related
Posted this over on Code Review initially because I was hoping to get some feedback on my CSS generally--which feels bloated to me--and I was told it belonged on Stack Overflow because I have a problem with nonfunctional code.
I've recently spent 9 hours building a site, my first time touching code in a few years, and even then I was never much good with it. I worked with a mobile-first approach in mind, but after building the basic site, I tried to implement media queries to get the site working well on larger screens and . . . well, my media queries flat-out have NO effect. As far as I can see from examples, I've formatted them correctly, but they produce no results at all.
This is a jsfiddle that contains the relevant content.
http://jsfiddle.net/LuGXP/
And the media query in question . . .
#media (min-width:480 px) and (max-width:960 px) {
body {
background:red;
}
}
Right now, I have it set to the very simple (and would-be eye-searing) change there just to test that it's responding to the media query at all. My actual goal would be to have the layout go from single-column at mobile device widths to dual column, then entirely horizontal, with a slight font-size increase at larger sizes.
Caveats:
1) I realize the code is likely very bloated. I want to address that at some point, but I figure it makes more sense to handle an actual pure functionality issue first and then take it back to Code Review.
2) There are some lines of CSS that probably don't make much sense with the index page. These pertain to the other linked pages, which share similar layouts.
If any more information would be useful, let me know.
Looks like a typo: http://jsfiddle.net/LuGXP/2/
BAD
#media (min-width:480 px) and (max-width:960 px) {
GOOD
#media (min-width:480px) and (max-width:960px) {
There shouldn't be a space between the value (480) and the unit (px).
It's usually good to work with the minimum code when trying to troubleshoot a problem. In your case, most of the code in your example is unneeded.
To that point, here's a stripped down example: http://jsfiddle.net/LuGXP/3/. As you might guess, this will turn the background red when the body is between 480 and 960x wide.
body{
background: green;
}
#media (min-width:480px) and (max-width:960px) {
body {
background:red;
}
}
Does anyone know of any alternate styling I can use to make this mobile compatible? I'm pretty sure it has something to do with the height value but I can't just get rid of it because the part that php call runs into my text without it.
<section style="width:100%; float:left; height:100px; clear:both;" >
<section class="campaign_statistics" style="background-color:#EFEFEF;">
<?php include('progress_chart.php'); ?>
</section>
</section>
Have you seen http://cssmediaqueries.com/
Media queries allow you to do separate stylesheets for certain screen resolutions. For example, you can have one stylesheet that runs for desktops, one for laptops and one for mobile devices.
You can then specify different styling for objects that relate to the stylesheet and screen resolution you are trying to style for.
I'm working on a medium-sized mobile single-page app implemented using the usual html5 suspects and some mobile and JS frameworks (Cordova/PhoneGap, jQuery, knockout and iScroll being the most prominent of the bunch).
Up until recently I was using jQuery-Mobile, but finally got too frustrated with it and have decided that it needs to get the boot.
In my markup I still have all pages as div-tags directly beneath the body tag, and now I'm looking for a strategy on how to manage pages and transitions between them.
The idea I'm looking for feedback on is to position all pages absolutely inside the body, and adjust the left/right position depending on the direction I need to slide in. In CSS terms this would look something like this:
body {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
}
body > div {
position:absolute;
top:0;
left:320px; /* this is page/viewport width, will be calculated and set on app start */
}
body > div.current-page {
left:0;
}
My expectation is that this structure would make it easy to add page transitions using CSS3 transforms.
Has anybody tried this already?
Is something like this going to work across browsers on the various mobile platforms?
Any traps or things to look out for?
Any suggestions for libraries to use for the actual page transitions?
Will this play nicely with iScroll?
I already have my eyes on a router library/implementation, but am open to recommendations in this area as well.
In case you were wondering about why I'm discarding jquery-mobile, here are my top reasons:
all the DOM rewriting from data-tags doesn't play nicely with knockout, and so using it's widgets was more pain than gain
having to write much of your css as "patches" to jqm's own styles was unproductive
it's router doesn't support page/hash parameters
it's not designed to deal with any kind of asynchrony in its event chain, such as delaying page transition until something has been read from device local storage
Thanks for reading this far! :)
I need to test this, but I've had success with webkit (chrome, android, ios) and ie10 using negative margins on my relative divs to shift them out from on top of each other. If a relative div has a negative margin-right equal to its width, it should reside off screen left. To slide it in to center view, give the div a transition css on margin-left, then set its margin-left to zero.
Perhaps you can use pager.js to link between page dives, and encapsulate such margin and transition css as classes you can apply on each page's showElement and hideElement events.
pager.js hideElement, showElement
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 months ago.
Improve this question
I hope this question doesn't end up being closed for being too broad a subject but I was wondering about Responsive/Adaptive Web Design, i.e. one website for all browsers, all devices.
What is the best way to implement such a site when it comes to structure and layout?
I've being trying to read up on it since mobile websites are the big thing right now and will be for a while but I can't find a list of tips and guidelines and I figured that if such a resource was available here on SO then we could all benefit.
Another thing that gets me is how is dynamic image scaling done?
Out of everything this is the thing that puzzles me most because layouts I'm guessing are probably done using percentages rather than pixel values because pixels will vary from one device to another but images are probably the key factor in achieving one website for everything.
I'm looking forward to reading people's opinions and answers, even if it is just links to tutorials on the web that I haven't found.
1. One website all browsers.
As #Tak mentioned the answers here is 'Progressive Enhancement' and 'Graceful degradation'. However the definitions he gave are not quite right. Here are the proper ones:
'Progressive enhacement' (see link) means that you code for the old browser first (IE6/7 with/without JavaScript is a good starting point) using tried-and-tested technologies such as HTML4 and CSS1, then add enhacement as you progress through testing on more modern browsers down to Chome and Safari on mobile devices which support CSS3 and most of HTML5. This way, you aim to provide any browser with the best possible combination of features supported in it (its never going to be perfect by the way so bear in mind the 80/20 rule to avoid running project into the ground).
'Graceful degradation' (see link) is kinda the same thing but backwards, its a more lazy way of doing it. You start building your site against a modern browser and then apply 'patches' and 'fixes' until its acceptable on older browsers. This ends up creating a lot more work than planning it properly from the start and what generally tends to happen with this approach is that the developer/stakeholder will give up at some point (ie. what the hell? its too much work to get this working in IE6/7 - I'll just de-scope them)
2. Best way to standardise the layout
Personally, my suggestion is that if you want a standard layout across mobile and desktop devices I suggest you use a combination of BIG fonts (so they are visible in a tiny mobile screen) and small ones (so people that have a Desktop browser can read all the detail) on a Desktop-size 900-1000px width.
This site is an example:
http://www.valuetrader.net
When I open it in my Desktop browser I see a lot of detail, but when I'm on the go and use my Smartphone all the critical information (ie should I BUY or SELL a share?) is displayed on a very big font that appears legible in my tiny screen.
UPDATE 2014
This part of the question has now effectively changed to 'Whats the best way to implement the layout?'.
At the moment (and for the last few years of widely available CSS3 support) the standard approach for cross-device layout design is to use a so called 'Responsive' layout based on media queries. There are many CSS frameworks available to get users started with mobile-friendly layouts.
The basic principle for 'Responsive' design is that scrolling on mobiles devices makes vertical space virtually endless so you are only limited by horizontal space. Thus you have to ensure that as the screen gets smaller you let the page flow to fill up all the available horizontal space, and any navigation bars or horizontal elements are folded over vertically so that items are stacked on top of each other rather than using space horizontally.
The standard way to test a site's 'responsiveness' is by dragging the side of your browser window to reduce available width.
The better way is using Developer Tools, for example Chrome has a button to toggle device mode, here is an example using Stackoverflow:
An example of a media query to specify a layout for the #site-banner element on desktop and mobile screens would be as follows:
/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }
/* TABLET SUPPORT - rules apply below 1000px width */
#media all and (max-width: 1000px) {
#site-banner { width: 700px; }
}
/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
#media all and (max-width: 700px) {
#site-banner { width: 480px; height: auto; }
}
/* MOBILE SUPPORT - rules apply below 480px width */
#media all and (max-width: 480px) {
#site-banner { width: auto; height: auto;}
}
3. How is dynamic image scaling done?
The mobile device does a lot of this for you so generally you just need an understanding of how it works. Basically, when the first mobile browsers came out they had to make sure that the sites that were already out there working for desktop browsers worked on a mobile too (otherwise nobody would use their smartphone to browse the web) so they had to come up with clever ways to detect the width of the site and resize it to the screen resolution that they had available.
For example my site 'www.desalasworks.com' is coded to 900px width, but it works fine by getting down-scaled on a small 320px screen (images on the page are automatically resampled using a variety of methods - such as nearest-neighbour sampling and bicubic interpolation, and the fonts replaced with native fonts wherever possible). As far as the image sampling goes, if you have ever pinched a photo on your smartphone to 'zoom in' and 'zoom out' you know what I'm talking about.
You generally dont need to worry about CSS to get your images to resample properly, I noticed that sometimes they are a bit funny when using percentage widths so stick to pixels if thats the case to make it easier for the browser to tell where items are in relation to one another. Note that you CAN specifically detect the mobile browser and set the width of your site to 320px and everything in it to fall in-line accordingly but in reality this is not necessary to have a working site on a mobile device and doing this will force you to maintain 2 sites, a mobile site and a desktop site (which some companies are happy to do).
4. Percentages / fixed width.
Personally I tend to use fixed width centered on a screen (using CSS margin: 0px auto), I haven't used percentage widths for a LONG time, mostly because its a bit of a nightmare to standardise the layout. If you do use percentage widths you'll basically have to do a lot more testing so I would tend to veer away from them.
Bear in mind this is just my opinion, some 'reponsive web' gurus will swear by percentage widths on just about everything, I'm just not sold on the idea of sacrificing predictability of the layout for what I see as marginal benefit. But then I come from a background of building desktop webapps, I'd probably think differently if I was just focused on mobile web (where horizontal space is at a premium and layouts tend to be simpler).
You're correct about the percentages.
As art elements, the habit is to (with CSS) set a percentage width on an image and set it's display to block.
There's a couple techniques for changing the resolution of images based on the client's screen size as well, like responsive-images.js. I don't think there's a perfect answer on how to tackle this issue yet.
If you're really interested in responsive design, I highly recommend Ethan Macotte's Responsive Web Design.
The two buzzwords at the moment are graceful degradation and progressive enhancement and I'm a fanboy of the latter. Graceful degradation means you hide and/or resize elements on the page for viewing on a mobile screen. Progressive enhancement means you code for the mobile browser, then add bits on if they're using something bigger. The latter is best because it prevents mobile browsers having to download giant images and a bunch of includes it'll never use, and mobile bandwidth is at a premium.
I use 320andup which is a great way to style a web page at 320px for mobile browsers, then other resolutions for tablets, netbooks, PCs and ridiculously large Mac displays. Web pages look great on all resolutions.
I never use percentages. I style a web page at 320px fixed width, 480px fixed width, etc so I know exactly how it'll look on each device. I do all my image scaling on the server with variables in the URL - the server caches the resized images for later page loads. That way my shiny web 2.0 logos are tiny for mobile devices but large on the big screen. This is another reason not to use percentages!
The answer by Steven de Salas is excellent! If you have the time, effort, and/or team available to do a hand-crafted mobile website, then go for it with his tips.
But if you want just an automated, mobile-ifying function, then that's also possible. In fact, starting with an automated function that can make a website mobile-friendly is a good starting position for making your own customized version.
Basic Approach
Use document.styleSheets[0].cssRules to parse the CSS Rules and cssRule.style to change previously configured styles. The advantage here is clear: Most of your CSS already done can automatically be ported over to the mobile version.
Basic Solution
viewport — Set your viewpoint in the header: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
img.width — The simple part is to parse every image and adjust the width according to a scale (currently, I use 1:2 ratio for image sizes).
document.styleSheets[0].cssRules[i].style — Use document.styleSheets[0].cssRules and the rule.style attribute to parse the CSS file for your site, and adjust everything up/down in size as needed.
Demo
var isMobile = false;
var ui_scale = 1;
var image_scale = 1;
document.getElementById('mobile-ify').addEventListener('click', function(ev) {
isMobile = !isMobile;
if(isMobile) {
ui_scale = 2;
image_scale = 2;
} else {
ui_scale = 0.5;
image_scale = 0.5;
}
const styles = getUIScaleableStyles();
const stylesheet = document.styleSheets[0];
const ruleList = stylesheet.cssRules;
for (var i = 0; i < ruleList.length; i++) {
const rule = ruleList[i];
for (const style of styles) {
if(rule.style[style]) {
const fontsize = rule.style[style];
const numeric = parseInt(fontsize, 10);
const unit = fontsize.replace(/^\d+/, '');
if(unit !== '%') {
const resize = ui_scale * numeric;
const newvalue = resize + unit;
rule.style[style] = newvalue;
}
}
}
}
const images = document.getElementsByTagName('img');
for (const image of images) {
const oldwidth = image.width;
const newwidth = image_scale * oldwidth;
image.setAttribute('width', newwidth);
}
});
function getUIScaleableStyles() {
const updateableStyles = [
'fontSize',
];
return updateableStyles;
}
.text {
font-size:1em;
}
<center>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Honeycrisp.jpg/1920px-Honeycrisp.jpg" width="100">
<br><br>
<button id="mobile-ify"><span class="text">Mobilify Site</span></button>
</center>
I have a small problem with a horizontal menu I have implemented for a website. The menu only contains three items, but when viewed on quite a large widescreen monitor, the last item appears to collapse on to a new line. I can't actually test this myself as the widescreen monitor is used by my client, and whilst I can't reproduce the error they have sent me this screenshot.
The client is using Internet Explorer 8 on Windows 7, and I have tested this browser and OS on a normal size monitor which seems to work. It seems to be the widescreen that is the problem.
Here is how the page looks on my screen, and every other subsequent screen I've tested on.
Here is the code I have for the menu.
HTML
<div class="menu">
<ul class="nav">
<li class="nav-item" id="first-item">WHY US</li>
<li class="nav-item">LINKS</li>
<li class="nav-item">CONTACT</li>
</ul>
</div>
CSS
.nav-item {
font-size:2em;
margin-left:175px;
}
.nav-item a {
color:#2B2F73;
}
.nav {
list-style-type:none;
padding:0;
margin:auto;
width:744px;
}
.nav li {
list-style-type:none;
float:left;
display:inline;
}
#first-item {
margin-left:0px !important;
}
.menu {
width:960px;
height:40px;
margin:auto;
}
Can anyone identify any glaring errors in my code that may be producing this error?
try reducing some width in .nav-item, .nav and .menu
If this does not helps you, then can you please provide the link where this is been hosted. So that we can check ther and quickly reply to you.
The problem is that they've got their "Text Size" set to "Larger" (or perhaps "Largest"):
Your code is here, and it looks exactly like the client's screenshot with "Larger" text in IE8.
Now you can reproduce the problem, you should be able to fix it.
I'd provide better instructions, but it's difficult to do so without being able to see the entire site.
The "widescreen monitor" part is not relevant - you're declaring width: 960px on the outermost container (.menu). It will be 960px no matter what the screen width is.
Try this
.nav-item {
font-size:2em;
margin-left:5em;
}
Granted, if the chrome (the user's browser) increases their text size too much, no matter what it will eventually break if you use ems as they are of course based on the text size.
<subjective>
In general, its best-practice to use percentages for text-sizes and use pixels for margins/padding/distances for best consistancy between browsers.
Also using a reset css (like YUI base-reset-fonts.css) is a good idea too
</subjective>
I'd suggest to play a bit with your width tags.
What about removing the one in "nav" ?
I'm sorry this is not a question to ask here. This problem is very easy to solve, you can figure out yourself if you try to change things...
My best advice on this question is that you get a decent tool to "test" CSS and see the result "live".
I'm happy with the Firefox/Chrome FireBug extension (but it doesn't save the result, you have to copy&paste it).