Mobile View Not Centered

Do you have any solution for two of my areas on mobile - the social area still displays one of my icons on a different row so it looks odd and the bottom area where I have ‘Review us!’ does the same thing - one of the images displays on anther row, making it look odd.

Screenshots attached.

Thanks.

Hello there,

I hope you’re doing well today.
Thank you for contacting us.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

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

      .panel-widget-style .social-area #menu-social li {
        padding: 0 10px;
      }

      .panel-widget-style .social-area #menu-social a:before {
        font-size: 40px;
      }

      #text-5.widget font {
        display: none;
      }
      
    }

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Awesome that worked - only a minor thing - not a big deal really but on the social section it all fits on mobile now but it is slightly low, too much space between the icons and the title - again, not a big deal just curious if there is an easy fix to that as well…awesome help…thanks.

Hello there,

You’re welcome!

To reduce the extra space on the social media section on smaller screen, try adding this CSS code:

    @media only screen and (max-width: 720px) {
      #pg-2040-3 .so-panel.widget .widget-title {
        margin-bottom: 10px;
      }
    }

Please note that #pg-2040-3 is dynamic ID selector. It will change itself whenever row position changed/updated. You should adjust it as it is updated. You can find it with the web browser’s inspector tool.

I hope this reply helps.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Worked - excellent - thank you…

1 Like

You’re welcome!

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

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support