Forum Moderators: not2easy

Message Too Old, No Replies

Adding linespace after left-aligned image

         

Gemini23

1:51 pm on Feb 20, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



having posted elsewhere (in hindsight) this is probably the best place to post this for a CSS solution...

Currently using the following to add a fixed/permanent space below a left-align image which works on desktops/mobiles
<div>height:1px; clear:both</div> BUT it doesn't work on the new AMP (accelerated mobile pages)

Basically a small left-aligned image is used on many posts/pages on a Wordpress site. The above is added as the usual <br /> doesn't keep the linespace - and keep any text that follows the image to be placed UNDER the image.

Any suggestions on how to rectify this?

Maybe adding a DIV class in css (don't know how to do this) OR to add css for left-aligned images only to add a linespace after the image? (right-aligned ones are fine as they are with text-wrapped)

not2easy

2:14 pm on Feb 20, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



The part about "(don't know how to do this)" suggests that the place to start is to use a tool such as the Web Developer Toolbar (a FireFox Extension) that lets you highlight an element to see what is causing a specific element to behave the way it is behaving. It will tell you the name of the css file, the line number and the specific element class to work on by clicking the CSS menu and selecting "Display Style Information".

This is the information you need to have to know what to do to work on a fix. You can edit the css in a plain text editor (saving the original always) and try out ideas by using the toolbar to "Add a User Stylesheet". That way you can view the live site and apply local changes to it to see how it will look. When you are happy with the results, you upload your new css file.

If you can tell us the current css, there are some highly skilled css folks in the forums that can help you get it right. Without knowing what is already there we can only list suggestions that may or may not get it fixed. The addition of AMP to the mix makes it a little trickier, (for me anyway) because AMP is not so familiar yet.