Inner Sections layout problem

  • Resolved Alejandrom3

    (@alejandrom3)


    5 years, 8 months ago

    My site has 6 boxes and i want it to distribute them in this way:

    – Desktop size: 2 rows with 3 columns
    – Tablet size: 3 rows with 2 columns
    – Mobile size: 6 rows with 1 columns

    The problem is in desktop, when i use the custom percentage width option, it makes all my columns fits in the same row. In tablet, when there is no space it actually create a new row and push the box there.

    The main problem is, if i want to create new boxes, in desktop size will always try to put them in the same row when in tablet you can customize it so when there is no space push them to the next “row”. How i can solve this?

Viewing 8 replies - 1 through 8 (of 8 total)

  • I would handle this in the following way, by adjusting the Column widths like so:

    Desktop: Set each column width to be 33%
    Tablet: Set each column width to be 50%
    Mobile: Set each column width to be 100%

    Thread Starter Alejandrom3

    (@alejandrom3)

    I actually did that but for someone reason in desktop when i have 33% in the first 3 blocks, the fourth one doesnt move to a new line, instead it satys in the same line with 1%: No matter if i try to change it but it doesnt let me.

    Try 33.3% to see if that takes up that bit of extra space.

    Thread Starter Alejandrom3

    (@alejandrom3)

    The problem is NOT setting the width the blocks, the problem is, when there is no space left to be in the row for the block to fit, instead ot go to the new line it stays there, no matter if I try to change the width, automatically it rewrite the number i wrote for an automated answer

    How have you created these boxes? Can you share a link to a screenshot?

    Thread Starter Alejandrom3

    (@alejandrom3)

    Let’s say I have 4 blocks but i want to have 3 in the first row and one if the next one

    Problem with elementor 01

    When I try to manually change the width, for a reason, it doesnt let me push the last one to the new one.

    Problem with elementor 02

    For example: the first one have 33%, but when i try to change the 3rd one, when i click out of the input, the 33% changes to 3% and the last one automatically change to 31% to fix the 100%, when i try to fix the last one with 33%, the third one change to 30% and the last one automatically changes to 3%, leaving me with no option than use always the 100%.

    The problem only occurs in desktop view since i checked on tablet view and it actually push the blocks to the new line.

    Problem with elementor 03

    I think I understand now. You are only having issues with desktop when you want to change how many show per row (section). The problem is that a section is by default going to take up 100%, so if you want to have some items on two rows, you’ll need to actually have two sections. There won’t be any wrap-around within the same section.

    Thread Starter Alejandrom3

    (@alejandrom3)

    It’s a shame, since the problem was when the tablet actually works fine, using the same logic, its gonna look something like this:

    Problem with elementor 04

    There is going to be a white space instead of the fourth element being next of the third one (thats how i wanted to look like)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Inner Sections layout problem’ is closed to new replies.