Shape 5

Hi,
I swapped out the 'ad' image with one of mine and two issues have emerged:

1. the margin around the image is not the same - and I very carefully edited my pictures to the exact size of the 'sample' picture that was there in the demo. So I'm not sure why the image does not have the same border all around.
2. The two smaller boxes on the right hand size now don't align with the main image slider (as you can see in the attached shot) - again I don't understand that if I haven't messed around with the sizes from what was there in the Demo / Template then why has this happened?

Your help / clarification would be much appreciated.

Thanks

Your picture here:
http://sychadelics.com/images/25ad.png

Is 337x168.

The demo picture here:
http://www.shape5.com/demo/salon_n_spa/images/25ad.jpg

Is 338x166

This is most likely the issue that your picture is slightly off in pixels vs the demo.  I would adjust to the exact pixel to be sure this doesn't happen.

Ok, will do, Thanks. For future reference can you please let me know how you got the exact size of the demo picture? I went into the images folder and downloaded each image that I wanted to swap out and then edited my pictures to the same size, so I'm not sure how I made this mistake in pixel sizes.

Hello,

Just right click the image that you want the dimensions in the browser and click Inspect Image or something similar depending on the browser your using. There it will show you the dimensions and image file size.

Hi,

I've tried to do most things as you guys have suggested but I still have a problem with the misaligned image slider and the two static images. I've used Pixlr to edit my pics to the exact size suggested - the only difference is that I've saved my pics as .png as opposed to .jpeg; other than that I've even gone back to the default content of the top right hand side image but I still can't sort out the misalignment.

Can you please let me know if there is something I'm missing out here.

Thanks

Hello,

A couple things here:

In the first "Welcome To Salon n Spa" module you have an empty clearing div in the source causing an extra row to be generated.

<div style="clear: both;"> </div>

In the second module you have wrapped the source coding with <p> tags.

<p>
<img class="shadow s5_lazyload" alt="" src="/images/25ad.png">
</p>

<p> tags have a default 5px padding on them so you would want to toggle to "code view" or change your editor to none and add the coding without <p> tags.

Not sure how the empty clearing div has gone in there as I copied the default code that you provided earlier and pasted it in. But I'll check again and redo it.
With the <p> tags, do I just need to delete these?

Thanks

Hello,

Editors often automatically add <p> tags when you hit "save" if any content is missing it to help users that are writing content. If your editor is doing this simply toggle the editor to None in the Global Configuration before saving and then re-enable it when you are done.

Thanks for the advice here, it's worked so far - no guarantees that I won't break it again thought :)

NP