I am new to bootstrap, and cannot figure out an issue.
The page looks ok in safari and chrome but is a mess in Firefox. Any ideas on how to fix this?
http://isu.edu/webdev/nosearch/dave/marcom/
-
Looks ok on Firefox 37.0.2 on OSX. What version of Firefox are you using? What OS?Asaph– Asaph2015-05-19 19:00:03 +00:00Commented May 19, 2015 at 19:00
-
I just looked at this in Firefox, and didn't see any display issues. Some copy-editing issues ... but nothing different between Chrome and Firefox. Can you be more specific about the problem you are experiencing?Kirk Powell– Kirk Powell2015-05-19 19:00:03 +00:00Commented May 19, 2015 at 19:00
-
Please include the relevant code and a description of the particular issue you are trying to solve.Kevin Boucher– Kevin Boucher2015-05-19 19:13:06 +00:00Commented May 19, 2015 at 19:13
Add a comment
|
1 Answer
Do the <figure> elements need to float in the columns? I was just looking quickly in Firefox's dev tools, but removing the float: left; from <figure> fixed it.
Your images are the children of the <figure> elements. They need to be responsive, and have a max-width of 100% of the column's width. Since the images' parents were floating, THOSE divs were overflowing out of the column width, preventing the images from resizing as needed (because they were scaling max-width: 100%; relative to the figures).
5 Comments
lostalmost23
Not sure what you mean. @ns1234 I'm new to bootstrap, what size should the images be? the goal is to have the image with a color and text on top, the color disappear on hover.
ns1234
The size of your images is fine. Your layout was getting messed up in Firefox because the images were not scaling down with the size of the browser. The solution above (setting the height to 300px) somewhat fixes your issue (because it forces the width to scale down), although it looks to be distorting the images because the proportion is getting messed up. I simply suggested removing
float: left; from the <figure> element in your css, as it unnecessary and preventing the images from scaling down. Removing that fixes the problem, without having to add a 300px height to the images.ns1234
It will also fix the problem of your centered text. Just remove
float: left; from your .tint class (maybe that caused confusion - I was referring to the <figure> element, but I should have referred to the .tint class that the <figure> element uses). If you go this route, don't forget to remove the height: 300px; from the image, as you really don't want to set a fixed height or width on images on a responsive site :)lostalmost23
you are awesome! New question...the blocks at the bottom. I want these to be just a color block...no hover effect. Would it be better to make them css blocks or an image? Then place the text on top, like above.
ns1234
Glad I could help. Would you mind accepting this answer if it solved the issue? The blocks at the bottom should definitely just be divs. You can give them whatever background colors you need. You also shouldn't have to absolute position the text on top like you did for the others. A few other things I noticed with your site: 1. BR and HR are self-closing elements, so
<br></br> is not correct. It should just be <br />, and same with hr. 2. You might want consider using larger images for your colored blocks. On a wider screen, the images don't fill the entire width of the divs.