Welcome! To use this support forum, please Login or Join Today!

   

Sidebar size and images

{name}
Rank

Total Posts: 2

Joined 2011-06-01

PM

 

Hi. My site is http://markfuss.com. I have a widget in the left hand sidebar set to display images of books that I am recommending. The image size is 150 height and 100 width. I would like the images to display on two rows of two images each, but at the present, they display on four rows of one image each. I do not think that the images are too wide for two of them to display side by side and this was how I had my previous theme set up to display. Can you help me to get the images to display as I would like?

Thank you for any assistance you may be able to provide.

Mark Fuss

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi Mark,
You can wrap the entire widget content in div.recommended like so:

<div class="recommended">
...your widget code…
</div>

then add this CSS to one of your stylesheets:

.recommended img {
 float: left;
 width: 100px;
 height: 150px;
 padding:0px 10px 10px 10px;
}
{name}
Rank

Total Posts: 2

Joined 2011-06-01

PM

 

Hi Casey,

Thanks. I will give that a try.

{name}
Rank

Total Posts: 2

Joined 2011-06-01

PM

 

Casey,

That did not work fully. It did allow me to display two images side by side, but it did something strange to the height of the widget sidebar.

The widget code is as follows:

<div class="recommended">
<
a href="http://www.christianbook.com/Christian/Books/product?event=AFF&p=1154231&item_no=202070"><img src="http://markfuss.com/wp-content/uploads/2011/05/Slave.jpg" /></a>
<
a href="http://www.wtsbooks.com/product-exec/product_id/7662/nm/Historical_Theology_An_Introduction_to_Christian_Doctrine_Hardcover_?utm_source=mfuss&utm_medium=blogpartners"><img src="http://markfuss.com/wp-content/uploads/2011/05/HistoricalTheology.jpg" /></a>
<
a href="http://www.wtsbooks.com/product-exec/product_id/7595/nm/Resolving_Everyday_Conflict_Paperback_?utm_source=mfuss&utm_medium=blogpartners"><img src="http://markfuss.com/wp-content/uploads/2011/05/ResolvingEverydayConflict.jpg" /></a>
<
a href="http://www.wtsbooks.com/product-exec/product_id/7686/nm/If_You_Bite_and_Devour_One_Another_Biblical_Principles_for_Handling_Conflict_Paperback_?utm_source=mfuss&utm_medium=blogpartners"><img src="http://markfuss.com/wp-content/uploads/2011/05/BiteDevour.jpg" /></a>
</
div

I greatly appreciate any assistance in getting this sorted out.

Thank you,

Mark Fuss

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

If you add a clearing class just at the end, it should fix the widget clearing problem.

<div class="clear"></div>

Also, it looks like WordPress is interpreting your line breaks as literal line breaks. Make sure “Automatically add paragraphs” is not checked or put all your HTML on one line.

Another thing I should probably mention is the image size, for example you are linking to 4 images at this size:

which is huge. I suggest downloading them locally, resize them and upload on to your site. It’ll greatly increase your page load speed. Even though you have resized the images in the browser, the user still has to download the full size in order to display.