Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 8, 2018 at 4:07 pm #970125
    MadRhino

    Hello all,

    I’m working on a page layout that includes a Color Section in the right section of which I positioned an Easy Slider. Now, due to the padding that’s added the Color Sections and/or how images in Color Sections are resized, this reduces the overall size of the Easy Slider and leaves a sizable padding to the right of the slider. That said, I was wondering if it were possible to have the Easy Slider lined up flush against the right of the page. I think that this would make for a much contemporary look.

    I understand that this is possible to achieve by using a grid row. On the other hand, I find it next to impossible to align the content of a Grid Row with that of the Color Sections. It also seems that Grid Rows don’t adapt as nicely with responsive page layouts.

    Thoughts?

    As always, I would really apreciate any ideas and pointers.

    Many thanks.

    June 9, 2018 at 9:50 am #970345
    Rikard

    Hey MadRhino,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    June 9, 2018 at 11:58 am #970386
    MadRhino

    Sure. No problem Rikkard. The site is not public as of yet; so, you will need to login with the admin login credentials provided below.

    The section in question is the “In Motion” section with the orange background and the Easy Slider to the right. As I’m sure you will agree, this would look much more contemporary and sleek if the Easy Slider would line up flush against the right edge of the page.

    Again, I know that this can easily be done using a grid row instead of the color section page element; however, it’s next to impossible to align the content of the grid row in the left cell with the ones of the color section above and below the grid row. I also find the grid rows not react as smoothly with the responsive site layout. See the dilemma?

    Many thanks for looking into that.

    Best,

    Karl

    June 10, 2018 at 7:22 am #970635
    Rikard

    Hallo again Karl,

    If you want the slider to be all the way to the right then you will need to make the whole section full width, please try the following CSS to achieve that:

    .home #av_section_3 .container {
    max-width: 100% !important;
    padding:0 !important;
}

    Grüß,
    Rikard

    June 10, 2018 at 7:27 pm #970851
    MadRhino

    I understand what you’re saying Rikard, but your code will put me in the exact same position as if I were using a grid row element. Making the entire section full width would naturally cause the header in the left column to no longer be aligned with the headers above and below the color section. Do you see the dilemma?

    Isn’t there a way to use the same padding that you guys use in the color section – but just on the left cell of a grid row? Just thinking out loud …

    Many thanks for your help

    June 11, 2018 at 8:53 am #970995
    Rikard

    Hi Karl,

    I understand what you are looking for but I think it will be difficult to achieve unfortunately. If you want to have a try then you can target the 1/3 element in that section using this CSS:

    .home #av_section_3 .av_one_third {
  padding-left: 200px;
}

    I added some padding to the left, but it will likely not be responsive.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.