I'm working on a custom stylesheet to override this site. https://adminluonline.blackboard.com/. Essentially we want the page elements to load as 100%. They all seem to assume that 1000px is the min-width for some reason. They'll stretch out past that as far as I want but won't go smaller.
I'm using the stylish Firefox plugin and am using !important to override. I've even gone as far as telling everything but 1 div not to display. However even with just one div, with no padding and no margins, it won't cooperate. Does anyone have any suggestions as o what could be my next steps?
#loginpane has a fixed width of 800px. That's what's causing the page to stop shrinking. Either use media queries or change this and the child elements which have a static width of 600px
Line 3 of theme1.css:
body{ min-width: 1000px; }
Probably the problem.
Related
The landing page image of my site keeps on getting trimmed on the top and bottom (height is limited somewhere). What I'd like is for the image to just display in aspect ratio, without height limited in normal browser.
I've wasted a good couple of hours trying changing tags in Chrome, debugging CSS, but I can not seem to get it to work.
The website is http://raiseyourglass.co.za/index.html.
The problem is, the background image doesn't command any height vs the width of the page. You can take advantage of the fact that percentage values for padding-bottom go off the width of the element. Try adding this to your CSS (you may need to add !important if the template overrides the CSS):
.wsite-background.wsite-custom-background {
padding-bottom: 33.33%;
}
Using Twitter Bootstrap v3.1.1 I created a custom WordPress theme for a client. All was going well until I realized in IE and Firefox the images were showing full size and outside of the boundaries of their parent elements even though I have max-width: 100% set.
I did some hunting around on the internet for options, naturally, and it was mentioned to put height:auto; on the img tag. This nearly worked, but images began to be stretched in some places, and still not obeying max-width in others.
Here is an example of images in widgets in the sidebar not obeying max-width: 100%
I hunted around some more and came across more hacks for Firefox and IE. Then Chrome started to misbehave as well. Now I have a messy stylesheet with tons of CSS hacks and there are still issues with images being stretched or showing full size. One of the suggestions was to mess with box-sizing and set the width of img to 100%, which results in the below with smaller images than the width of the parent container being stretched.
I'm about to go back to the drawing board where I'm only using max-width: 100% and start over.
My question is: how can I get ALL images used on WordPress to behave correctly and follow the max-width: 100% CSS rule? This is a responsive website and I need all images to stay within their containers, NOT be stretched or skewed, and grow/shrink while constraining proportions as the browser size changes.
It's not because of Bootstrap and WordPress together - we use it all the time. You can use
img {height: auto; max-width: 100%;}
and that will make all of your images responsive, which will also fill their containers up to 100% of the original image width and resize the height to maintain the aspect ratio.
If your image's container is 1000px, however, and your image is originally 500x250, the image will only fill up half the container because max-width: 100% will give the image a max-width of 500px.
You can use
img {height: auto; width: 100%;}
and that will ensure that your image fills the entire container. But beware - in the above 1000px container / 500px image scenario, your image will scale up and might begin to look pixellated.
Another thing to note - your images might be overriden in the widgets. For example, one popular sidebar images widget hardcodes the width and height into an inline style (a horrendous practice and I hope they stop it). You can override that and make it work with:
img[style] {height: auto !important; width: 100% !important;} //or
.widget[style] img {height: auto !important; width: 100% !important;}
I'm willing to bet that your sidebar image problem is that there are styles (via the plugin css or inline) that are overriding your original image settings.
So this ended up not being specific to Bootstrap or WordPress. It was a combination of
A style I had copied in from who knows where a { display: inline-block; }
Bootstrap box-sizing on all elements
WordPress using width and height attributes on images
After I took out the weird a { display: inline-block; } (that I still don't even know how got there and can only assume I was tired and loopy), most of the image issues went away. I just had to target a few instances of images to get them to behave.
I'm happy to know I can use Boostrap in the future to help speed along project styling. Thanks, everyone, for the help!
If you go to http://digitaldemo.net/anova/ and resize the browser to make it smaller and then scroll horizontally to the right, you will see that the background now covers the part of the page outside the wdith of the visible screen.
Why is this happening?
Any help would be most appreciated!
Best,
Cynthia
Add this.
#navbar{ min-width: 1100px; }
same to .footer, .wrapper, and .footerbottom
min-width:1100px
The problem is because the #nav element has a hard width of 1100px and a width:100% background on another element is only 100% of the width of the viewable area.
Changing the min-width on the <body> to
body {
min-width: 1100px;
}
will set your minimum page width to be the length of your longest element and therefore the CSS background will extend as it will be 100% of 1100px wide.
For future projects I'd recommend reading responsive web design - one aspect being to design a site will adapt to the available width/height of a device, through a combination of non-fixed dimensions on elements and/or CSS Media queries.
I just debugged your code and found out the issue. The issue is you are using overflow:hidden property. It is causing problem. like in class (.masthead) you apply this. Just remove it. then it is visible.
I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.
That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.
The code/website can be found at:
http://cliqthis.com/temp/roadhouse/index.php
Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.
You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.
Are we talking about the black bars not extending all the way to the right?
You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.
Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).
Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?
Set up a minimum width for the div.
div.class { /* ... */ min-width: ___px !important; /* ... */ }
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.