Designer Blocks for Gutenberg – image columns problem

[Nele]

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.

 

[scrambler]

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.

[Nele]

@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.”

 

“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.”

 

[scrambler]

Sorry, I was looking at the wrong widget.

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

[Nele]

And nothing else in the Custom CSS Rules

[scrambler]

Add the rule below and see if that fixes it

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

 

[Nele]

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

[scrambler]

@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%;}
}

[Author]

Posts