Tagged: , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 12, 2016 at 2:25 pm #631395
    enzowillemstad

    Within a Color section I have 2 columns.
    The background of these columns contain an image which has 2 sides (exactly half). One side white (where the text needs te be) and the other side has a image.
    The text needs te be on top of the white part of the background-image but not on the image part. So I center, center the background image and give the content of the column a padding on the image side of 50%.
    This works on mobile because the columns are underneath each other, but this doesn’t work on full width. because the columns are next to each other it seems de 50% padding is calculated from the full width of the color section instead of the column (which is half the color section’s width)
    But when I set the padding on 25% and it all looks great at full width. it doesn’t look good on mobile.

    Is this a bug in the column padding options?
    Could somebody please help?

    May 13, 2016 at 6:32 am #631826
    Rikard

    Hey enzowillemstad,

    Yes it sounds like a bug, glad you pointed that out to us. Could you post a screenshot highlighting the changes you would like to make please?

    Regards,
    Rikard

    May 13, 2016 at 10:21 am #631959
    enzowillemstad

    Hey,

    It would be nice if the 50% entered in the padding settings should be 50% of the column. I’m not sure how it calculates the 50% now..
    I’ve added a link to a screenshot which explains it.

    Regards,
    Emile

    May 15, 2016 at 7:51 am #632465
    Rikard

    Hi Emile,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Thank,
    Rikard

    May 17, 2016 at 9:23 am #633572
    enzowillemstad

    No problem.

    May 18, 2016 at 12:50 pm #634369
    Josue

    Hi,

    It’s because Grid Row columns are set as table-cell, so their percentage value is calculated using the parent element table (and not of the individual cell) as base so using 25% is correct because 25% of 1210 is 302.5 which would the half of a half.

    Best regards,
    Josue

    • This reply was modified 8 years, 7 months ago by Josue.
    May 18, 2016 at 1:01 pm #634381
    enzowillemstad

    Yes that sounds logical, but when the page is shown on a mobile device the parent element is the same width as the individual cell and the 25% is not correct. Perhaps there should be alternative padding settings for mobile?

    May 18, 2016 at 1:10 pm #634395
    Josue

    That’s because in mobile the Grid table and table-cell turns into block, one thing you can do is set a different padding for mobile:

    @media only screen and (max-width: 767px) {
    .flex_column {
        padding-right: 50% !important;
    }
}

    You can set a custom ID to the Grid Row or a custom class to the cell element and change the CSS code accordingly.

    May 18, 2016 at 1:30 pm #634419
    enzowillemstad

    Yes this works, but this changes the padding-right for all the Columns on mobile to 50%. It’s not possible to give the specific columns individual id’s so I can style them separately.

    May 18, 2016 at 1:52 pm #634440
    Josue

    Hi,

    Yes, you can set a custom ID to the grid row and change the code accordingly:

    @media only screen and (max-width: 767px) {
    #custom_grid_row .flex_column {
        padding-right: 50% !important;
    }
}

    Best regards,
    Josue

    May 18, 2016 at 1:58 pm #634452
    enzowillemstad

    Oh yes of course!
    Thanks! for the great support again.
    You guys are the best!

    May 18, 2016 at 2:04 pm #634462
    Josue

    You’re welcome, glad to help :)

    Regards,
    Josue

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