"Images overlapping text on mobile" (#1765522) / PenciDesign

Comments

A9210833 started the conversation
October 30, 2018 at 12:53pm
Images and galleries are overlapping text when viewed on mobile in safari and google chrome.
example:
http://hikemag.com/hiking/uk-hiking-trails/malham-cove-walk/

2,699

PenciDesign replied

October 30, 2018 at 2:56pm

Hi,

Please try add more this code to Customize > Custom CSS to fixed that issue:

@media only screen and (max-width: 769px){
.wp-block-gallery:before, .wp-block-gallery:after {
    content: '';
    display: table;
    clear: both;
}
}

Best Regards,

PenciDesign

A9210833 replied
October 30, 2018 at 3:05pm
Hi,

I've added to custom CSS, but the images are still overlaying the text and now an image in the gallery at the bottom is missing:

http://hikemag.com/hiking/uk-hiking-trails/malham-cove-walk/

Andy
2,699
PenciDesign replied
October 30, 2018 at 3:10pm
Hi,
Please send me your admin url and admin account ( username and password ) - in a private reply. I will take it a look on this help you.

Best Regards,
PenciDesign
A9210833 replied privately

2,699

PenciDesign replied

October 30, 2018 at 4:32pm

Hi,

I've fixed all your issues ( include Footer Columns responsive issues ) by add more this code to Customize > Custom CSS:

@media only screen and (max-width: 769px){
    .wp-block-gallery{ display: block; }
.wp-block-gallery:before, .wp-block-gallery:after {
    content: '';
    display: table;
    clear: both;
}
    .wp-block-gallery .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure{
        display: inline-block;
    }
    .wp-block-gallery .blocks-gallery-image figure, .wp-block-gallery .blocks-gallery-item figure{ width: 100%; }
    .footer__sidebars .footer-sidebar-item{ width: 100%; }
}

Best Regards,

PenciDesign

A9210833 replied
October 30, 2018 at 4:35pm
Thanks, you guys are great!
Andy