My website uses this code for width and it is shown perfectly on a 15.6 inch screen, but for mobile screens and netbook & tablet screens of 10 inch, the website is completely messed up. It uses a fixed width, I tried to make it auto, 100px but no success. here is the css code:
#container {
width: 1180px;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
Website is HERE
there is a background image and container is placed over it. How to modify this code to have auto width for different screens?
PS: Script is opencart.
Try using a percent rather than a fixed width in your CSS.
#container
{
width: 95%;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
If you want to use different CSS depending on the device it is being viewed on, your best bet is to use Media Queries as suggested by #Ruddy
Try this below css.. ( for all width apply in max-with:100% )
#container {
width: 1180px;
max-width: 100%;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
Related
My web theme has a slider built in that wasn't full width. I did some research and to make it full width I added a 1400px wide image and set the containers css to:
width: 100%;
padding-right: 0px;
padding-left: 0px;
However it doesn't scale to smaller screen sizes like I was hoping. I did some research but can't find anything that works or is that specific. How do you think I can fix this and make it look the same on all screens.
instead of width set max-width
body {
margin: 0
}
div {
max-width: 1400px;
margin: auto;
}
img {
max-width: 100%
}
<div>
<img src="//placehold.it/1400x900" />
</div>
Here is a fiddle.
I'm using the Foundation framework, specifically the reveal plugin to have a popup window slide into view after a button is clicked. This will contain one image which I want to fill up the entire popup.
This works well unless the window size is wider than the image, in which case the image no longer fills up the entire popup. I can combat this by overriding some CSS:
.reveal-modal {
padding: 0;
max-width: 950px; /* always will be maximum image width */
background: transparent;
}
However I can't figure out a good way to center the popup horizontally in the window after doing this. Any ideas?
Figured out a solution, not sure why I didn't think of it earlier. I just put all of the content in the modal into another div with the following style:
.reveal-modal-inner {
margin: 0 auto;
position: relative;
max-width: 950px;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
Works perfectly, here is the updated fiddle.
This also works...
// styling to make reveal-modal have a max-width
.reveal-modal {
padding: 0;
background: transparent;
border: 0px;
#include box-shadow(none);
}
.reveal-modal-inner {
padding: 1.25rem;
margin: 0 auto;
position: relative;
max-width: 650px;
#include box-shadow(0 0 10px rgba(0,0,0,0.4));
background-color: white;
}
#media #{$medium-up} {
.reveal-modal-inner {
padding: 1.875rem;
}
}
...here i've used compass to handle the box-shadow generation and foundation's scss breakpoints. obviously the max-width in this case is 650px but you can increase that to what suits your situation. inner modal background is set to white so you can see your content/paragraphs/forms/etc.
Hope it helps, works with foundation 5.1
If you images vary in size and you always want them to fill the entire witdth of the modal you can try the CSS3 background-size:contain; to scale an image beyond it's native size. Otherwise just set the width of the modal to the smallest sized image and use width:100%;. Foundation reveal has size classes that you should customize and leverage. Centering the image has to do with it's absolute positioning so you will need to override Foundation's style with:
left: 0;
right 0;
margin: auto;
I'm building a responsive grid using the max-width of 980px to convert my fixed PX widths to % but I'm unsure what I have to do to update the heights also set in PX to %. Can anyone advise on how this can be achieved? I've tried to set height to max-height:300px; height:100% but with no success.
Js Fiddle http://jsfiddle.net/5jJQk/
Example CSS
#ctn{
max-width: 980px; /* 960 */
width:100%;
margin: 0 auto;
clear: left;
background: #eee;
padding: 10px;
}
.col{
background: #b7b7b7;
max-height: 300px;
height: 100%;
margin: 1.041666667%; /* 10/960 */
float: left;
}
.four{
width: 31.25%; /* 300/960 */
}
.eight{
width: 64.583333333%; /* 620/960 */
}
.twelve{
width: 97.916666667%; /* 940/960 */
clear: left;
}
height in percentage only works if the parent element has defined height, or it's in percentages all the way up to the root element.
See what happens when you add
html, body, #ctn { height:100%; }
to your CSS.
However, defining height is only necessary in very specific cases. Usually you want blocks to accommodate to their content.
I would look into media queries, they work really well when converting.
http://mediaqueri.es/
http://css-tricks.com/css-media-queries/
http://www.w3.org/TR/css3-mediaqueries/
I hope this helps.
i am having a problem with my website on Widescreens on Firefox/Chrome. It's not centred for some reason, margin: 0 auto; is not working either. The website looks fine on normal screens or even wide screens with lower res but on 1900x1200 the content is not centered for some reason. However the website looks fine on IE 9 at 1900x1200.
Here is the code:
jsfiddle.net/hXskH/
Any clues?
For it to be centered you need to add a width along with that margin: 0 auto; Most common width is 960px;
#main {
padding-bottom: 300px;
margin:0 auto;
position: relative;
width: 960px;
}
You have not set width for #main, so as it is block level it has occupied full width ie 100%.
Set the width for element.
#main {
padding-bottom: 300px;
margin:0 auto;
width:<your-width>;
position: relative;
}
I would like to display all my content in a div that is 800px wide, centred in the page. That way, all browser window widths are catered for. How do I go about doing that?
Set your div CSS as follows:
#container {
width: 800px;
margin: 0 auto;
}
I would also recommend adding text-align:left; to the container div and adding text-align:center; to the body tag. Reason being that Internet Explorer 6.0 will not handle the auto margins.
body {
text-align:center;}
#container {
margin: 0px auto;
text-align:left;
width: 800px;}