column element Mobile View - Support | Kriesi.at

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

Author

Posts
May 5, 2023 at 9:13 am #1406512

DianaLoola73
Participant

Dear Support Team

I have a question regarding the mobile optimization of the following column element: http://neu2.dc-gmbh.com/#service

In the mobile view and on the tablet the following unwanted views occur:
1. overlapping of the elements (see screenshot http://neu2.dc-gmbh.com/support/screen-box1.jpeg >> mark pink).
The bottom two columns (of the 5 columns) overlap the top 3 columns. How can I prevent this? The columns should be displayed on the tablet and mobile device with a small distance between each other.

2. big distance between the boxes (see screenshot http://neu2.dc-gmbh.com/support/screen-box1.jpeg >> mark blue)
The distance between the other boxes is very large on the mobile devices. I have already integrated the following CSS script, but unfortunately it doesn’t have much effect:
@media only screen and (max-width: 989px) {
.responsive #top #wrap_all .flex_column.av-break-at-tablet {
margin-top: 0px;
margin-bottom: 0px;
}}

Could you please help me regarding the two points – OVERLAP and DISTANCE between the boxes?
Best regards Diana

May 6, 2023 at 6:49 pm #1406587

Mike
Moderator

Hey Diana,
Thanks for the link to your page, the overlap is due to the negative column margin that is set for all screen sizes:

try setting the negative column margin only for the desktop version, which is the next icon, the same applies to the padding.
You can set the margin and padding for each device size to suit your needs with these icons.

Best regards,
Mike

May 8, 2023 at 8:43 am #1406702

DianaLoola73
Participant

Hello Mike,

thanks for the setting hint. I was able to solve the problem of overlapping and the cells now appear on the mobile and the tablet portrait under each other.
However, the distance between each box (column) when they appear below each other is very large: see screenshot tablet: http://neu2.dc-gmbh.com/support/2/box-gap.jpeg
How can I reduce this ?

Many thanks for your editing
Many greetings, Diana

Translated with http://www.DeepL.com/Translator (free version)

May 8, 2023 at 6:54 pm #1406781

Mike
Moderator

Hi,
Please check the column padding, you have large padding set for all devices:

try changing this to the desktop icon and set a smaller value for the mobile icon, similar you how you corrected the margin above.

Best regards,
Mike

May 9, 2023 at 8:07 am #1406842

DianaLoola73
Participant

Hello Mike,

But if I change the settings here, then yes only the inner distance within the column changes, see screenshot http://neu2.dc-gmbh.com/support/screen-innenabstand.PNG

However, I was concerned that the vertical distance between the individual elements on the mobile device or even the tablet portrait format (where the individual columns are displayed one below the other, which is correct) is very large: see “Large Distance” – display here: http://neu2.dc-gmbh.com/support/screen-box1.jpeg

Many greetings, Diana

May 9, 2023 at 5:49 pm #1406920
Mike
Moderator
Hi,
Thanks for the feedback, try this css:
```
@media only screen and (max-width: 989px) { 
	.responsive #top.home #wrap_all #service .flex_column_table .flex_column {
	transform: none!important;
	margin-bottom: 20px!important;
	}
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
May 10, 2023 at 8:15 am #1406956

DianaLoola73
Participant

Dear Mike

the script works perfectly, both for the mobile and the tablet portrait. Thank you very much!
Best regards, Diana

May 10, 2023 at 5:17 pm #1407021

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

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

The topic ‘column element Mobile View’ is closed to new replies.