Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #12620

    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

    #76170

    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

    #76171

    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

    #76172

    Bumping this up as I need a reply asap

    #76173

    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

    #76174

    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.

    #76175

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

    #76176

    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

    #76177

    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

    #76178

    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;

    }

    #76179

    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

    #76180

    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

    #76181

    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

    #76182

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

    #76183

    Hi cutecreations,

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

    Regards,

    Ismael

    #76184

    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

    #76185

    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

    #76186

    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

    #76187

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

    #76188

    I finally figured it out myself woo!

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘URGENT Margins aren't consistent’ is closed to new replies.