I'm designing a responsive site (See the site here) and in the small-screen version, I'm absolutely positioning a banner (unfortunately I have no other way to manipulate the location).
On iOS7 and all modern browsers, the banner pops in to place nicely using a top: 31%
However, in iOS6, the banner appears half-way down the page (at the exact same pixel density and screen size - see this screenshot)
I can't figure out the differences between the page rendering of the two browsers.
The specific style that I'm looking at is #outerWrap h1 .
Any help would be appreciated!
Related
I'm trying to get images on my Hugo site to display full bleed (edge to edge) only on mobile/tablet view. In desktop view, I'd like the images to remain constrained within the parent container. I'm using Tachyons CSS.
I've looked into the solution suggested here but it would require me to re-design the whole site to implement the additional columns and it's not mobile-only.
Another option I considered was removing the padding on the content column in mobile view. This has the intended effect as far as the images are concerned but it also means the text runs to the edge of the screen which makes it hard to read. Not a good solution.
To see an example of what I'm trying to do, please have a look here: https://brianli.com/. You'll notice that as you resize the browser window the images fill the viewport from edge to edge. In desktop view the images only extend to the edge of the container.
I'm grateful for any help or guidance you can provide.
I'm creating a (react) component library for documentation and testing purposes for our company. A kind of style guide. Some of our components have styles that depend on media queries to scale up and down nicely.
Our style guide site is responsive but I would like to be able to render different screen sizes. As an example, I wanted to show how the site header looks like in desktop and mobile without having to resize the window, as if they were multiple iframes with different zoom levels.
So I was thinking if it was somehow possible to make html elements think they are being rendered in a larger or smaller screen by changing their zoom level. A sort of scaling, while staying within the same limits.
In google chrome there is a tool who do this.
Right Click > Inspect the element > The mobile icon at the top corner right
Check my screenshot below.
Cheers mate ;)
I've am currently customizing a theme for an e-commerce website and it works great on all browsers. But when zoomed in (25% to 90%) or zoomed out (only at 150%) my category list on the right side of the page seems to get indented in. I this this is most likely a CSS issue and I tried fixing this on my own, but no good.
You can see it here: http://www.autumnmeadow.com/jar-candles
The code should be able to be seen on the developer tools for whichever browser you are using. There does not seem to be any issue on IE9 but it does not work correctly on Chrome or FireFox.
Try making the width and height in % and not in px. lets say if you want it to fill the half of the screen, make it 50%.
<div width="50%" height="100%"></div>
You can always use css transform: scale(...) based on what the zoom level is and scale the size up/down, therefore negating the zoom level.
Github project for detecting zoom levels, here
I wrote a website but I have a bug in it, when I resize my browser my website resizes with it. I have noticed this in Firefox (10.0.2), Chrome (16.0.912.77) and opera (11.60). I tested some other websites omgubuntu webupd8 and when I resize Firefox it still looks good (it doesn't resize with the web-browser). I would love to post images but I need 10 reputation for that.
Using CSS, apply a width (such as 1000px) to your <body> and add margin: 0 auto; to centre the content. You'll have to bring the width of your navigation links down and re-position the ads, but this will stop your site from 'resizing' with your browser.
I strongly suggest using a good CSS Framework. Two good options are:
http://960.gs/
http://blueprintcss.org/
They provide you a fixed width layout as well as an easy way to divide the column into grids.
I'm embarking on my first foray into mobile site design - I've set up a method to redirect mobile users to a separate URL, but now I need to design the mobile version of the site (targeting smart phones like Android / iPhone). What dimensions should I create this to? Is there a way to force mobile browsers to scale the content down? (Currently my site just appears very big within the mobile window and you must scroll horizontally and vertically to see it all).
320 X 480 pixels is standard for mobile sites.
Things you ABSOLUTELY MUST KNOW about footers for mobile.
iPhone has the bastard of all browsers and no emulator emultates it correctly for - specifically:
CSS footer style - position:fixed; bottom:0;
Don't even try it.
iPhone only recognizes position:relative;
iPhones do not recoginized the position style of fixed - in case you want a footer to stay on teh bottom.