Pictures have margin on mobile

Sydney
#1

Hi everybody

I looked up my problem in the support forum. It seems that others have had the same issue. Yet the custom CSS that was proposed in their case did not work on my site.

Here’s the issue: The pictures on my webpage are integrated with the Visual Editor of the Black Studio TinyMCE Widget. On the desktop, they look good but on the mobile version, they have a weird margin that I cannot fix (see pictures below). My URL is: www.sonjakoeppel.ch

IMG_71AC71D6E559-1
IMG_71AC71D6E559-1750×777 259 KB

Can you please give me a hint or send me a few lines of code? Thank you so much!

#2

Hi,

Thank you for contacting us. I am happy to help out.

I checked your website, but the section as seen on your screenshot is now not bening visible. It seems likely you have made some changes.

Please let me know if you still need help with this and point me to the issue need to be rectified.

Regards,
Kharis
aThemes Support

#3

Hi Kharis

Thank you for replying. It’s weird, that you were not able to find the section on my screenshot. The URL which would lead you there directly is: https://sonjakoeppel.ch/reporting/.

The problem I described is only visible on the mobile version. I’m pointing it out with red arrows on the following picture:

Bildschirmfoto 2020-11-30 um 23.09.04
Bildschirmfoto 2020-11-30 um 23.09.041426×552 252 KB

Can you do something about that space on both sides of the header-image? Thank you in advance.

Regards, Sonja

#4

Hi Sonja,

I visited different page before. And thank you for sharing the new link.

As checked, you can add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 780px) {
      #pgc-1392-0-0.panel-grid-cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

#pgc-1392-0-0 is the current CSS ID, that may be changed as you move/update the row composition in page builder. If it gets changed, you should make adjustment. You can find the CSS ID with your web browser’s inspector tool.

Regards,
Kharis
aThemes Support

#5

Hi Kharis

I tried the CSS code that you offered (Thank you very much for your try). Unfortunately the margin on mobile did not disappear.

I don’t fully understand what you tried to explain to me regarding the current CSS ID.

Bby the way, the CSS ID (selector) that I was able to copy with the Developer Tools was the following: #panel-1392-0-0-0 > div > div > p > img

Why do I get a different CSS ID selector than you?

I also tried to identify the class for that specific container. But when I implemented the code you suggested in the following different way, it still wouldn’t work out.

   @media only screen and (max-width: 780px) {
      .panel-widget-style {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

I don’t know how to deal with it… Could you please give me some more instructions or try another way?

Regards,
Sonja

#6

Dear Kharis

I just realized that the CSS code you supported me with is perfectly solving my problem for the one page named “reporting”. Thanks a lot for that!!

As the problem still exists for all the other sites except the homepage, I wanted to know, if there is also a solution for the rest of the webpages (only visible on mobile):










Could you please give me some advice here too? Thank you very much for your effort :raised_hands:.

Kind regards,
Sonja

#7

Hi Sonja,

Thank you for getting back.

To apply one style for multiple rows in different locations, you should add one class name to the rows where you put the top images from each row settings. For example: my-top-row

Screen Shot 2020-12-06 at 06.39.39
Screen Shot 2020-12-06 at 06.39.39290×549 13.5 KB

Then you can add this CSS code to Additional CSS of your website’s Customizer.

    @media only screen and (max-width: 780px) {

      .my-top-row > .panel-grid-cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

    }

I request you give it a try and let me know your views.

Regards,
Kharis
aThemes Support

1 Like
#8

Wow, awesome! Now It’s working properly :smiley: ! No more margins.

Thank you so much. This fully solved my problem.

Have a good weekend.

Best regards,
Sonja

1 Like
#9

You’re welcome Sonja!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

1 Like