I am working with Bootstrap, and Flat UI. I am trying to have a header area span full width and the rest of the website fit inside a container thats 940px. The header area looks good in all non-mobile browsers, but when I view it using Safari and Chrome in iOS6 the header is not spanning full width. Can anyone help?
You can view the site here
The problem is that you have a fixed width of 940 pixels on content area of your website and your top banner is set to only take up 100% of the viewport. On a cellphone, 100% of the viewport is less than 940 pixels so you can scroll horizontally to see the rest of the content, but the top banner doesn't stretch further than the original 100% of the viewport.
Instead you may want to try to make your content area more responsive using media queries so that it is more narrow on smaller screens, or you could just give your content area a width of 100%, or you could give your banner a min-width of 940px.
Related
My current homepage banner scales down to mobile and the image & text shrinks to a size that's unreadable.
How can you make it so that after it scales to a certain point the image stops scaling and it just cuts off the width of the image?
My site: www.riotsociety.com
Example site: sunglass.la
Add this into your CSS files.
This will make your slider 70% of the viewport height. So it will take 70% of any device's height.
this will solve the image problem
.fullwidthbanner-container {
height: 70vh; //please work around this value
}
Now the thing is that the Slider's JS is calculating and giving to each element sizes and styling's.
The buttons content becomes 3px in size on mobiles.
Now I see 2 solutions for this.
Read the documentation of the slider library or plugin if there is any and try to make it not give heights and values for the responsive part of the slider and just do it by your own. You'll need a little bit of CSS.
Or, let it as it is and write on top CSS.
Do you have access to the code? Or it's just a shopify website? I can see that the slider is owl_carrousel
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
I need to have colorbox window with static width (it is actualy dynamic - depends on css specified width or image actual width etc...) except mobile version. I'm doing responsive website. When I resize browser window it always have fixed width, but when I'm on mobile the colorbox window is wider than broser window - it doesn't resize to fit the browser window screen. I apply this:
$(window).on('resize', function(){
$.colorbox.resize({width: '100%'});
});
This help, but if I return to non mobile device or when I resize browser window it stays at 100%. But at this point I want to return colorbox window to have static width as previous. Keep in mind that previous width is based on content width (image width) or css specified width.
Any idea how to do this?
Thanks
Why do you only want the colorbox to be 100% width when user resize the window? Notice what you did in your JS is not detecting whether user is on a mobile device.
It seems like you should use media queries instead. Read more here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I have SVG with width set to 2048px and I want it display in Opera Mobile (with possibility to scroll horizontally if it is bigger than screen), but for some reason Opera is always displaying the SVG with width = 800px and scaling down the SVG. This happens only on a real device (Samsung Galaxy Tab 8.9 - resolution 1280x800). This happen also in horizontal mode - in which screen width is equal to 1280px so the SVG is even SMALLER than a screen. On the other hand on the Opera Mobile emulator it has the width set to 1280px (still no scroll but it's better).
I also tried to place SVG in div with some fixed sizes but without success - the size of div is correct but SVG is scaled down...
Are there any way to render a page with horizontal scrollbar? Or workaround the bug which causes the SVG in horizontal mode set to the width of shorter dimension?
You can check the example here: http://www.pax.ndl.pl/test/svg_temp.xhtml
Ok .. so here's the scenario. I've got a WP7 silverlight app, that loads an image from the net. Now, these images will be taken from mobile devices, so they may be in portrait or landscape mode. Certainly not a square.
Is there any way to maintain the aspect ratio when I show these in a silverlight <Image> control?
I'm ok with either of two resolutions:
That the image shows up in its correct aspect ratio within a predefined box that I've defined in xaml
Or that the image is cropped into the square
The way silverlight was built, you can set the width OR the height on the image, it will automatically max out whatever property you set and calculates the other side of the image so that it keeps the aspect-ratio.
So, just set a width on the image and center or right,left,top,bottom align it. (do not stretch it).