Topic: Additional CSS image padding not working on mobile

greggzambrovitz
April 17, 2023 at 4:13 pm

Hi – couldn’t find answer in forum – I use the following “additional css” for image padding which works fine on desktop but not on mobile:

figure.wp-block-image,
.gb-grid-wrapper figure.wp-block-image {
margin-bottom: 2em;
margin-top: 2em;
}

So I tried adding this “additional css” for mobile but does not work:

@media (max-width: 768px) {
figure.wp-block-image,
.gb-grid-wrapper figure.wp-block-image {
margin-bottom: 2em !important;
margin-top: 2em !important;
}
}

I seem to remember that “additional css” gets stripped on mobile. For example, if you set font size in “additional css” area it won’t work on mobile – so you have to edit it in the typography settings area for it to work on mobile.

But, I don’t know how to work around the padding issue for mobile.

Thanks in advance.
Fernando
April 17, 2023 at 7:17 pm

Hi Greg,

I can’t seem to see your Additional CSS being loaded. Do you have a plugin that’s causing this?

Can you try disabling plugins like Autoptimize temporarily first, and we’ll try to recheck?
greggzambrovitz
April 17, 2023 at 7:33 pm

I disabled Autoptimize – thx

Fernando

April 17, 2023 at 10:00 pm

There’s a syntax error in your Additional CSS code.

There’s a missing closing bracket } here:

@media(min-width: 769px) {
                .nav-align-center .inside-navigation {
                    max-width: 1200px;
                    margin: auto;
                }
            
            .slideout-navigation.main-navigation .main-nav ul li a {
            text-align: center !important;
            }
            
            span.author.vcard a {
                pointer-events: none;
                  color: #000000;
            }
                
            .main-title a:hover {
                color: #174bd2;
            }
                
            .main-navigation {
                box-shadow: 0 2px 2px -2px rgb(0 0 0 / 20%);
            }
                
            .entry-title a:hover {
                color: #174bd2;
            }
                
            figure.wp-block-image,
            .gb-grid-wrapper figure.wp-block-image {
                margin-bottom: 2em;
                  margin-top: 2em;
            }

You need to add one somewhere there. The missing closing bracket is causing issues.

greggzambrovitz
April 17, 2023 at 10:10 pm

ah man, sorry about that.

you are right – the missing closing bracket for unrelated css – I did check the css before I opened support – but guess I missed that.

this problem is now fixed – sorry you had to edit my crap css work – lol.

but, that’s why I tell everyone to use GP – great theme – better support.

take the rest of the day off and do some shots….thanks a bunch.
Fernando
April 17, 2023 at 11:29 pm

You’re welcome, Greg! Have a great day as well!

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Additional CSS image padding not working on mobile