Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #631395

    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?

    #631826

    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

    #631959

    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

    #632465

    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

    #633572

    No problem.

    #634369

    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 ago by Josue.
    #634381

    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?

    #634395

    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.

    #634419

    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.

    #634440

    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

    #634452

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

    #634462

    You’re welcome, glad to help :)

    Regards,
    Josue

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