URGENT Margins aren't consistent « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Propulsion

closed

resolved

URGENT Margins aren't consistent

20 posts from 4 voices

Started 1 year ago by cutecreations
Latest reply from cutecreations
This topic is closed
This topic is resolved

Tags:

No tags yet.

cutecreations
Member

Hey, I have downloaded the propulsion theme but I'm getting a bit stuck trying to set the margins in between images to specific sizes. The products on the homepage have a margin of 21 pixels. I managed to get the 3 images below the main homepage slide to line up perfectly with the products, but this caused the portfolio icons (under artwork tab) to break up (2 images on top line and 1 image below. I've now got the artwork page to have 3 columns again but I really want this to match the margins of the products. Please please can you help, I'm desperate to get this launched (ps I'm not fussed about the site being responsive – i'd rather it was a fixed width). http://cutecreations.co.uk/wp/

Many thanks

Kate

Posted 1 year ago #
Mya
Hi Kate,

You may find it easier to adjust the declaration below. Using your website as a test I set the left margin as 30.8% which aligned flushed left and right with the slider above.
```
div .one_third {
    float: left;
    margin-left: 3.8%;
    overflow: hidden;
    position: relative;
    width: 30.8%;
}
```
By the way, the three main images below the slider are broken into two lines for me without the code above. I'm using Firefox.

Regards,
Mya
Posted 1 year ago #
cutecreations
Member

Hi May

Thank you for your help, however this actually breaks up the artwork page for me and still doesn't make the margins the same as the new products on the homepage. I'd really like all of the 3 columns to have images which are 296px wide x 210px high with a margin of 21px.

Is there any way I can do this. I'd like it to be a fixed with and not responsive as I am having too many problems across browsers.

I am using safari and firefox

Many thanks

Kate

Posted 1 year ago #
cutecreations
Member

Bumping this up as I need a reply asap

Posted 1 year ago #
Devin
Moderator

Hi cutecreations,

I'm not really sure what you are looking to do when taking a look at the current site. Getting things to line up pixel perfect across browsers is going to be a lot of very specific changes which, while we can help and point you in the right direction, can not go into fixing each browser+verison.

If you have not already, look into using the Columns element in your frontpage template and then use the Direct Text Input and add in the images like you would a regular html page. That will give you the easiest control while not having to do a lot of css changes and messing with the theme's core files.

Regards,

Devin

Posted 1 year ago #
cutecreations
Member

Thanks Devin I will have a look into it.

Basically all I wanted was smaller gaps between each column but in doing so, it's messed up the layout a bit especially the artwork page.

Posted 1 year ago #
cutecreations
Member

The gaps still look massive between the 3 pictures below the homepage :(

Posted 1 year ago #
Devin
Moderator
Hi cutecreations,

What you could try doing is targeting only the columns on the home page. It will effect any other column elements you put on the home page template but the main thing is it adjusts the spacing a bit.

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#top.home .one_third {
float: left;
margin-left: 2.1%;
overflow: hidden;
position: relative;
width: 32.0%;
}
#top.home .one_third .first{
margin-left: 0;
}
```
Regards,

Devin
Posted 1 year ago #
cutecreations
Member

Hi Devin

I sorted out the homepage images and shop products by using the following pieces of codes.

.shop_columns_3 .products .product{
margin:0pt 21px 20px 0pt;
width: 296px;
}

div .one_third{
overflow: hidden;
margin-left: 21px;
width:296px;
float:left;
position:relative;
}

But it's still not sorted out the artwork page. Do you know what the code will be to sort out this page to match the margins on the homepage?

http://cutecreations.co.uk/wp/artwork

Kind regards

Kate

Posted 1 year ago #
cutecreations
Member

I found this on another thread but it has made no difference whatsoever, yet it worked for the author of the thread. http://www.kriesi.at/support/topic/a-few-tweaks-and-adjustments-to-my-site

Here's the code I added to custom.css

.wrapper .box_small {
width:296px;
}

.portfolio_entry .box1{
margin-right: 0px;
}

.portfolio_entry .box2, .box3{
margin-right: 21px;
}

Posted 1 year ago #
cutecreations
Member

It's strange because when it's loading up, you can see the images exactly as I'd like them and then they get pushed over :(

http://img6.imageshack.us/img6/9173/screenshot20120603at191.png

Posted 1 year ago #
Devin
Moderator

Hi Kate,

By targeting the one.third css completely, you'll get some weird effects across the site. For the home page changes I would recommend putting #top.home at the beginning of each of your css changes so that it doesn't effect the rest of your site. Then you can make the changes to the other specific pages in the same way.

As for the current issue, the isotope function in avia.js is doing the math to give the images a margin and then order them on the page based on that. The css is written to support that. You'll need to re-do the math if you want to change the spacing. Just open up js>avia.js and search for "isotope".

Regards,

Devin

Posted 1 year ago #
cutecreations
Member

Hi Devin

Thank you for your reply.

Please could you tell me what values I would need to change? I searched for isotope but it came up many times in the code and I am not familiar at all with JS.

Kind regards

Kate

Posted 11 months ago #
cutecreations
Member

Is there nothing I can do just in css to sort this issue out?

Posted 11 months ago #
Ismael
Moderator

Hi cutecreations,

Devin is right. I also tried to fix this issue using css but it failed.

Regards,
Ismael

Posted 11 months ago #
cutecreations
Member

Hi Ismael

As I posted above I don't know which values I have to change in the avid.js file. I have never dealt with javascript before so I really need some help with this.

Kind regards

Kate

Posted 11 months ago #
Devin
Moderator
Hi Kate,

Taking a look at this again, you can try targeting the grid3 specifically on that page with:
```
#top.page-id-491 .one_third {
width: 285px;
}
```
I'm not sure what effects this will have cross browser but it might give you the forced hack you need to change their alignment.

Regards,

Devin
Posted 11 months ago #
cutecreations
Member

Hey Devin

I tried the code and it has stopped the 3rd column from dropping down onto the next row, but is there any reason why I can't make the width 296px to match images on the homepage? (it also didn't change the size of the margin)

Kind regards

Kate

Posted 11 months ago #
cutecreations
Member

Geez 1 month on and this has still not been resolved...

Posted 11 months ago #
cutecreations
Member

I finally figured it out myself woo!

Posted 11 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top