Home Forums Designer Blocks for Gutenberg Designer Blocks for Gutenberg – image columns problem

This topic contains 7 replies, has 2 voices, and was last updated by  scrambler 1 month, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #56804

    Nele
    Participant

    Homepage: https://wycliff.de/relaunch2018/dna/
    Admin: kr45mn
    Password: 67jh#t78(u)

    I didn`t get an answer for this so far (since ), so here is the question again:

    I chose for the  image-column-block (with the numbers and circles) a width of 70%, but doing so, it isn’t responsive any longer.
    How can I get it responsive? For a smaller device it would be great to have it split in 2 columns and for smarthphone in 1 column.

     

    #56809

    scrambler
    Moderator

    I am pretty sure we went through that before.

    Right now there is a rule that forces the single columns display on devices under 670px. Given this is not a standard value, I suspect that is a custom CSS rule we added, but I cant be sure as for some reason your site does not let me see the CSS file.

    So when I shrink the browser down, under 670px, it switches to a single column with the image on top and the text below as intended. Let me know if this is not what you see.

    Some phone have high resolution screen and may not display that layout because the threshold is too low.

    If that is the issue, check in the custom CSS rule box, and see if you see a rule that starts with

    @media all and (max-width:670px) {

    and set width to 96%.

    If you see that rule, you can increase the value to 768px and see if that fixes your issue.

    #56810

    Nele
    Participant

    @scrambler, this is how it looks like on smartphone:

    In the custom CSS rule box I do not have any rule that affects the image column.
    (You gave me a rule that override the base 25% wide base rule in order to get the column equal big. But I removed it, because it didn`t work.)

    This was the text you wrote to this issue the last time for weaver:

    “There seem to be some problem with the flex CSS of the multiple columns.

    If you look at the section of her page that has 4 columns with a circled number at the top and text below, as you reduce the browser width, we get unequal width columns and they extend outside the container.

    I see two problems:

    The width is only set with %, but the flex-grow and flex-shrink are not set, which allows the columns to expand or contract. If you want to set a fixed width value, you need to set the grow and shrink to zero, using a rule like

    flex: 0 0 48%

    the other problem is that the flex-wrap is set to no warp, so when the columns switch from one row of 25% wide, to 48% wide, they do not wrap on two rows.”

     

    #56818

    scrambler
    Moderator

    Sorry, I was looking at the wrong widget.

    Can you list all the options that you set for that widget

    #56836

    Nele
    Participant

    And nothing else in the Custom CSS Rules

    #56840

    scrambler
    Moderator

    Add the rule below and see if that fixes it

    .wp-block-wvrblocks-imgcols.align_center {flex-wrap:wrap;}

     

    #56844

    Nele
    Participant

    Yes, it fixes it. Is it also possible to get one column for smartphone?

    #56852

    scrambler
    Moderator

    @weaver, you may want to have a look at your Gutenberg block, as It looks like the flexwrap is a missing CSS for its styling.

    To make a single column on phone, Add the rule below

    @media all and (max-width:581px){
    .wvrblocks-imgcols__has-4 .wvrblocks-imgcols__column-one, .wvrblocks-imgcols__has-4 .wvrblocks-imgcols__column-two, .wvrblocks-imgcols__has-4 .wvrblocks-imgcols__column-three, .wvrblocks-imgcols__has-4 .wvrblocks-imgcols__column-four {width:100%;}
    }

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

You must be logged in to reply to this topic.