Forum Support

Shape 5
March 29, 2024, 06:45:56 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Issues with Top Images Layout/Sizing  (Read 1839 times)
AAJS2014
Jr. Member
**
Offline Offline

Posts: 152



« on: January 07, 2015, 02:03:26 PM »

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
« Last Edit: January 07, 2015, 02:05:04 PM by AAJS2014 » Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #1 on: January 08, 2015, 02:02:09 PM »

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.
Logged

Jonah Hall
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
AAJS2014
Jr. Member
**
Offline Offline

Posts: 152



« Reply #2 on: January 08, 2015, 03:10:09 PM »

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.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: January 10, 2015, 06:20:37 PM »

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.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
AAJS2014
Jr. Member
**
Offline Offline

Posts: 152



« Reply #4 on: February 09, 2015, 04:13:44 PM »

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
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: February 09, 2015, 11:23:40 PM »

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.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
AAJS2014
Jr. Member
**
Offline Offline

Posts: 152



« Reply #6 on: February 10, 2015, 06:46:14 AM »

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
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: February 10, 2015, 06:04:39 PM »

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.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
AAJS2014
Jr. Member
**
Offline Offline

Posts: 152



« Reply #8 on: February 11, 2015, 04:08:06 PM »

Thanks for the advice here, it's worked so far - no guarantees that I won't break it again thought Smiley
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #9 on: February 11, 2015, 10:15:34 PM »

NP
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.