Is it possible to have the images in the columns align bottom when resizing the browser window on a desktop computer. At some sizes the image on the right in the "News" sits higher (because of the amount of text in the column).
I've tried implementing this code but does not seem to be working: img {vertical-align: bottom;}
Thank you in advance for any suggestions.
Sinclair
offlineMember
So, in the 'News' column, you've got rwo extra divs with a class of vertical-align-bottom, one of which has the home-right.jpg, remove both those divs (remember to remove their corresponding closing </div> tags) and replace the image (the markup of which is slightly malformed, there's a comma in there!)
So in both columns add a class of rel, so the 'Opto Diode Corporation' column, looks like so....
<div class="lbm-column width-50 p7LBM-10-style-1 border-full rel">
The markup for the 'News' column becomes....
<div class="lbm-column width-50 p7LBM-10-style-2 border-full rel">
On the image in each column add a class of relim in addition to the scalable class already on them.
In the p7LBM-Custom-01 stylesheet, just above this....
/*Media Queries*/
..... add this.....
.rel {
position:relative;
padding-bottom:12% !important;
}
.relim {display:block; position:absolute !important;left:0; bottom:0; margin:2% !important; width:96% !important; bottom:0;}
/*My wee Query*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
.rel {
position:static;
padding-bottom: 20px !important;
}
.relim {display:block; position:static !important; margin:0% !important; width:100% !important;}
}
HTH
Sinclair
offlineMember
NP :-)
Your 'News' image seems to have gone walkabout though!
I noticed too that you have a max-width applied to the missing 'News' image but not the 'Opto Diode Corporation' image, it's probably best to keep them both the same as they'll likely display differently in browser widths approx 600px up to 700px.
HTH
You must log in to post.
