I am currently experimenting locally with Vantage theme(Wordpress)
Link
I want to set minimum width of the page in order to stop scaling down content when browser window is being narrowed.
It works perfectly on their site (at around 1020px width website stops scaling), and I wonder what is the trick to make it happen.
I have tried going with
min-width:1080px;
And it works nicely, however it crushes admin-bar completely, and plugins like Chrome Ruler. This indicates that this method is plain wrong, however on user-end everything looks nice.
Any other way to do it?
Edit:
Ok, I found the solution.
Adding min-width to body itself does not help, but works when added to:
body.layout-full {
min-width: 1080px;
}
Ok, I found the solution.
Adding min-width to body itself does not help, but works when added to:
body.layout-full {
min-width: 1080px;
}
Related
I'm in the process of making my wordpress website responsive. I have two images on the page I'm working on which I want to set a max-width on of 100% to make them responsive (this is what I did on another website I made and it worked beautifully). However, I have noticed that as I shrink the page in Chrome dev tools the <html> and <body> elements are shrinking to really odd sizes, completely unrelated to the viewport size. Below are screenshots of the and elements, respectively, being hovered over in chrome dev tools:
And, of course since max-width with a percentage value, "Defines the maximum width of the containing block" and the containing blocks here (<html> and body) are resizing themselves in this unusual way, when I set the images to max-width: 100% they base that off the weird size of those elements.
The only CSS I have on these elements is:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
So my question is, where on earth are the <html> and <body> elements getting their size from?
This behavior first began happening a few versions ago in Chrome; try testing your site/screens using FF (Moz/Firefox) responsive dev tools -- my guess is you'll see the results you expect. But this isn't necessarily an issue with Chrome; in my case it has something to do with environment. These days I work mostly with AEM and if I test in auth mode/disabled (or straight-up auth mode) this issue will occur. But if I view the same page live in production = no issue. So my guess (for us at least) is that it has something to do with the CMS or the server setup. I tend to use FF responsive dev tools these days -- give that a try and let us know how you make out.
html, body{
margin: 0; padding: 0; width: 100%;
height: 100%;
overflow-x: hidden !important;
}
Check to see that your zoom level is set to 100% (normal), in your browser.
I just manage to fix the same issue.
The problem is that the text forces the viewport width. You just have to ajust the font size to fix the issue.
I am using SquareSpace for the building blocks of my site and creating some custom CSS to fine tune. I'm trying to get the gallery page to display the images with more height. At the moment they are not very big in the slider, especially when viewed on a large monitor, seems like there is a lot of wasted space.
Using Inspect Element, I found there to be some HTML styling the height and restricting it to 500px.
<div class="slideshow strip main sqs-gallery-design-strip rendered: id="yui_3_17_2_1_1441831607164_254" style="height: 500px; margin-top: 203:5px;">
Changing the height from 500px to 600px in Firebug works perfectly, so I tried to apply some custom code to in the SquareSpace site. I used:
.slideshow strip main sqs-gallery-design-strip rendered {
height: 600px;
}
The injection of code did not have a visible result on the page. Am I writing the CSS incorrectly? Is there something I'm missing here? Please help.. Thank you!
Try to clear your cache. Sometimes a cache does not refresh on a server.
To clear it on a site, just hit Ctrl+F5.
Your CSS rule is close. It should read:
.slideshow.strip.main.sqs-gallery-design-strip.rendered {
height: 600px !important;
}
So I am creating a website and I've run across this issue. I have search around the internet and couldn't really find a solution to this problem even though I know sites like facebook.com does it.
I want to be able to restrict the resizing of my site's layout at a certain point. Is there some kind of CSS function which restricts the whole site's minimum width and height?
I just realized that these lines of code work:
div {
min-width:1000 px;
min-height: 1000px;
}
Have a look a this url:
http://www.preen.me/product/1113142/
The product box on the left has the class product_pic, and contains an img tag with these CSS attributes:
max-width: 100%;
max-height: 100%
This is to ensure that the image fits proportionally in the box.
It works perfectly in Chrome, Firefox and all other proper modern browsers on PC:
It does not work in mobile Safari. Specifically, if you try to look at this page on an iPad in landscape mode the image simply disappears:
I think this is a rendering issue in mobile Safari but I'm at a loss as to how to solve it. Removing either one of the max-width\max-life properties brings back the image, but obviously without the required functionality. How can I go around this?
As I remember it, this is fixed by setting html/body tag to width/height 100%.
html,body{
width: 100%;
height: 100%;
}
And don't forget to set all divs up to the div where it should have effecto to width/height 100%.
Also you can try to set the html,body to position: relative. I'm no longer sure about this one.
A few suggestions. Other than playing with "overflow:hidden", you can try adding default values for width and height or simply play around by using "width:auto" or "height:auto" or both. You may also want to set "float:left".
Hope this solves your problem (at least partially).
happy coding :)
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}