101 jili login register online download.Makakuha ng libreng 700pho sa bawat deposito

goutm
(@goutm)

2 years, 7 months ago

Hej!

For example, I would like to have a nice section: full-width line, divided in two sections, each of them has its own background color and contains a header and a text.

Here how it looks on desktop:
https://snipboard.io/sCpaYf.jpg

To achieve that I used group block (btw, is it possible to name group block somehow?) stretched to full width and a column block with two equal columns.
https://snipboard.io/jHrCEZ.jpg

For Columns block Block spacing is set to 0. For each column background color is set (and text color for the second column as well).

Now, to achieve a space around heading and text for each column a padding is set to 100px
https://snipboard.io/JFvWho.jpg

As I mentioned before, on a desktop everything is nice and crispy. But it is total disaster on a mobile:
https://snipboard.io/AIlRs2.jpg

So, my question is: how am I supposed to do to avoid this type of issue and have a nice view either on desktop or mobile?

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

thelmachido a11n
(@thelmachido)

2 years, 7 months ago

Hi @goutm

So, my question is: how am I supposed to do to avoid this type of issue and have a nice view either on desktop or mobile?

Adding padding within the blocks has reduced the space for text on the mobile view, to keep the view on mobile clean and clear you can choose the option to stack the columns on mobile as shown in the short video below:

https://testthelma.mystagingwebsite.com/wp-content/uploads/2022/08/Screen-Recording-2022-08-22-at-15.31.31.mov

Your column blocks will then look similar to what is shown below:
https://snipboard.io/y4VAbo.jpg

Let me know what you think ??

Thread Starter goutm
(@goutm)

2 years, 7 months ago

Hej @thelmachido and thanks for your answer. Yes, I always use “stack on mobile” — it is not clear on the last screenshot, but the columns are stacked. But that does not affect a padding
thelmachido a11n
(@thelmachido)

2 years, 6 months ago
Hi @goutm

But that does not affect a padding

I see, you can use CSS code to change the padding for the columns on mobile view. We can adjust the code so that it only affects the columns of your choosing.

Step 1
Add the CSS code below to your Customiser > Additional CSS. This code will create a CSS class with reduced padding for mobile view.
```
@media all and (max-width:760px){
 .smallpaddingonmobile{
	padding:30px !important
	} }
```
Step 2
Add the CSS class smallpaddingonmobile to the columns of your choosing in Editor. You can do this following the steps in the video below:

https://testthelma.mystagingwebsite.com/wp-content/uploads/2022/08/Screen-Recording-2022-08-25-at-14.44.22.mov

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

The topic ‘Different padding for mobile and desktop’ is closed to new replies.

Tags