Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 23, 2014 at 6:23 am #268994
    web4smallbusiness

    I’ve been struggling to find a solution to a request I’ve had from a client and I wonder if you may be able to help me please.

    My client would like more space between the left column on his website and the right column. Currently I have set the left side to be 2/3 and right side to be 1/3 on the following page.

    http://27.121.64.167/~sufjpwue/home/home-2/

    The client is very particular and would like more blank space between where the text is (on the left side) and where the photos are (on the right side). He would like the text that is below the video to end approximately at the same width as the video.

    I have tried doing different page layouts such as 3/5 for text 1/5 for blank space and 1/5 for photos, but then the photos were too small.

    Another idea I had was to make the left hand column 3/5 and the right column 1/3, which would give me the space, but I am not sure how to force the right column to be right aligned.

    I also thought that perhaps adding more padding to the right margin of the left column could work, but I am not sure how to do that.

    I need the solution to apply to all the pages

    Your help would be greatly appreciated, as I am totally at a loss.

    Cheers
    Ivana

    May 23, 2014 at 12:13 pm #269079
    Flikk

    this reduces the max width of all text blocks on this page:

    http://kriesi.at/documentation/enfold/custom-css-and-quick-css/

    .page-id-223 .avia_textblock {
    max-width: 560px !important;
}
    May 23, 2014 at 1:13 pm #269110
    web4smallbusiness

    Brilliant! Thank you Flikk. That worked.

    Just one more question please, if I want to apply that formatting to a few of the other pages, what is the format for adding in extra page ids? Would it be like this:

    .page-id-223; 224; 238; .avia_textblock {
    max-width: 560px !important;
    }

    or do I need to copy the complete code for each page this is to apply to?

    Thanks heaps!!!
    Ivana

    May 24, 2014 at 4:06 am #269411
    Ismael

    Hi!

    Thank you for the update.

    If you want to target different pages, you’ll need specify each page ids plus the element’s selector:

    .page-id-223 .avia_textblock, .page-id-224 .avia_textblock, .page-id-228 .avia_textblock {
max-width: 560px !important;
}

    Cheers!
    Ismael

    May 24, 2014 at 4:27 am #269415
    web4smallbusiness

    Thank you so much Ismael. I really appreciate your help.

    Ivana

    May 24, 2014 at 12:30 pm #269478
    Flikk

    An alternative is to use custom classes: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    That can help alot if you want to change specific elements.

    May 26, 2014 at 5:34 am #269917
    Ismael

    Hi!

    Glad we could help. You can also try @Flikk’s suggestion about adding custom css selector to give you more control over the design and layout of the theme.

    Regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Space between layout elements’ is closed to new replies.