Content crash on mobile device

Hi,

i recreated this demo ‘about me’-page: https://woodmart.xtemos.com/about-me/demo/fashion-minimalism/

..by using this template: https://gyazo.com/9181d51c46d78cfb665c4e6ebee63413

I had to make several changes to make it look like the preferred ‘about me’-page and now on desktop it already looks really good. However on mobile devices the content crashes and i don’t know how to fix this.

here are screenshots from the mobile view of my page:
https://ibb.co/TTC81Sw
https://ibb.co/DrVSdDB

the text-content+background (green color) and the image should be centered both (text-content+background below the image) and as you can see it isn’t overlapped as it’s on desktop or in the ‘about me’-demo page. I hope you can help me!

the link to my page is provided in the private section.

Thank you for your kind support & best regards,
LU

Hello,

Restore the page from the backups in WordPress to its initial state.

Create a new page in WordPress, insert the template do you have any problems?

Best Regards

Hi,

as i’ve already mentioned: i had to customize the template as it’s not the same as the featured one right here: https://woodmart.xtemos.com/about-me/demo/fashion-minimalism/

please take a look at the my page, i’ve already provided you link+access..

+ as you can see: i got this template three times on my page – 1x like the template (image on the right side, text on the left side, few modifications) & 2x in reverse appearance (image on the left side, text on the right side)

-> the 2 reversed versions of the template are completely crashing on mobile device, but also the content of the non-reversed template version is not 100% centered and not overlapped (there is a gap between image and text that i want to get rid of) as advertised on the about-me demo page..

and yes: i’ve also switched padding/margin attributes when i reversed/inverted the template sections..

Can you please help me?

Best regards,
LU

Hello,

You have not set the class “reset-margin” I have added the class to the columns with the text. Please check now.

Best Regards

Hi,

unfortunately now all images are messed up..
here’s a screenshot: https://ibb.co/2Mzb1np

Please help, thank you!

greets,
LU

Hello,

Please enter the columns with the content and enable the options shown on the screen: http://prntscr.com/ui3jgx

Best Regards

Hi,

i enabled these settings, but it’s still not working correctly as you can see here:
https://ibb.co/H4yWNHP

i tried all variations – enable settings on both columns, enable it only on column with text or enable only on column with image.. it doesn’t work. i just noticed when i enabled it on both columns the text got centered/aligned correctly, but the green background won’t change correctly.

plus: as you can see in the screenshot, even the content of the 2nd row is diplayed slightly off on mobile version.

what to do next?

Best regards,
LU

Hello,

You have changed the column settings and it caused the problem.

The column that contains the text should be/have:

If it is on the left, it should have -80px right margin. https://prnt.sc/ui8kt1

If it is on the right it should have – 80px left margin. You need to set the margin vice versa.

To set the vertical spacing add the correct margin-bottom to both columns as it was in the original template https://prnt.sc/ui8kt1

The column should have z-index-10 extra class if you want the column to overlap the image.

To make the column full width on mobile set 12 column width in column responsive option as it was in the original template https://prnt.sc/ui8y7s

WoodMart Extra – enable reset-margin option http://prntscr.com/ui3jgx

Best Regards

Hi,
i’ve already tried to set the columns vice versa and checked/corrected the other settings, i just can’t get it done. no matter what i’m doing, it won’t appear centered correctly on mobile device. it’s just possible like that: https://ibb.co/grhJwXc

plus the picture should slightly overlap the content as on the about-me template, not vice versa. here you can see the text content (with background) is not really centered and not overlapping (although i set reset-margin): https://ibb.co/sPYMpW4

hm..

Best regards,
LU

Hi,

To make column content align with column container try to remove column paddings (https://prnt.sc/uiq2ex) via column display settings like shown on the following screenshot (https://prnt.sc/uiq3hs).

Best Regards

Hi,

yesss, now it’s aligned full width on mobile but still not boxed and overlapped like in the about-me demo. for clarification i added two screenshots.

1. how it’s looking now: https://ibb.co/mRCsX02

2. how it should look: https://ibb.co/vLSrh0C

thank you for your help,
best regards,
LU

1. You have chosen the following template as design reference https://woodmart.xtemos.com/blog/woodmart_element/about-us-with-social-buttons/. This template contains 4vh margin-bottom (https://prnt.sc/uivm5j) in each column to create spacing on mobile devices, but you have changed the following value to 4px in the first column (https://prnt.sc/uivne6). Please change margin-bottom for first column to 4vh or equivalent value in pixels (30-40px).

2. You have chosen the template with background assigned to a column and this how WPBakery page builder columns work on mobile devices (https://gyazo.com/5e9619efa85549741c302d09f4aa82d6). To make your text column background “boxed” first remove background from the following column. Then add an additional inner row in this column, set background for new inner row and move all content inside this inner row (https://prnt.sc/uivwtd).

Best Regards

[Author]

Posts