Padding on Boxes

Hi There,

I have a few questions.

  1. How do I adjust padding on left and right sides for all pages. I am editing with elementor and it is almost touching the edges of the website on my mobile device.

  2. I added a button under an image and they are all displayed like this
    image > below description > button . but for some reason when I view it on my phone the buttons are moved away from the image boxes any idea why?

Hello there,

Do you have a link to your website to share here, so we can have a look? Custom CSS code might be a lot easier as your row composition might be a bit special.

Regards,
Kharis

Also do you know how to get the nav on the side bar with out doing a widget? How do you feel about the nav currently? I know alot of people do not prefer the hamburger nav. THANK YOU!

(http://www.soworldsolutions.com/)

Hello there,

Thank you for sharing your site’s link here. Let’s address the first question before other else.

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

    @media only screen and (max-width: 1024px) {
       .elementor-page .page-wrap .content-wrapper, 
       .fl-builder .page-wrap .content-wrapper {
           padding: 0 20px !important;
       }  
    }

Regards,
Kharis

Great thank you!
Do you have a way to get my current Nav bar on the side instead of the top?

Everything looks fine with it (see the below screenshot) and nothing to fix. Is that correct?

09

To enable mobile side nav, you’d use an extra plugin like ShiftNav.

Regards,
Kharis

Thank you!! Yes I forgot to add I fixed the button I was just waiting for a Nav reply. I will try now and hopefully catch you again quick if i don’t get it :slight_smile: THANKS!!!

Hi again!!!
I got the nav bar to work I just need help with:

**Getting rid of the main nav. i have tried #mainnav-mobi .mainnav ** in the “hide menu theme” on the plug in but it is still appearing. I want to keep the logo on top but get rid of that menu.

Hello there,

You can simply hide the default mobile button with this CSS code:

    .btn-menu {
      display: none;
    }

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

1 Like

Thank you it worked!!
Also wondering if i want to get rid of that completely how would i do that?

Also trying to change the color from green to orange to match the theme. Suggestions?

Hello there,

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

    .shiftnav-nav .current-menu-item > a.shiftnav-target {
      background-color: #f26730 !important;
    }

Regards,
Kharis

1 Like

Perfect!!!

Now when I send the link it comes up as one of my icons not my logo. Before it showed up as my logo, do you know why?

Sorry I didn’t get it. Would you please re-elaborate it?

Regards,
Kharis

No worries
So if you send the website link through text the site icon does not pop up, instead it is one of my icons - the growth icon. I set the logo for the website as well as the site icon (the one that shows up on the tab bar) but I do not know why it is showing up with an icon instead.

Also my logo gets cut off when I am on the ipad is there a way to make it larger and move it down more from the top?

Not sure if it’s theme-related issue. Probably you image sizes are to big that fails to load on mobile browser. Try on other device to see if any difference.

    @media only screen and (min-width: 1025px) {
      .site-header .col-md-4 {
        padding-top: 30px;
      }
    }

Regards,
Kharis

1 Like

I tried making it smaller with no success :frowning: How else can I fix it?

Hello there,

To avoid confusion between us. Please share a screenshot of what should be corrected. Put some annotations if possible.

Regards,
Kharis

48%20PM

I did not realize I could upload photos sorry!!

So it used to display my logo when I sent the link now it shows my growth icon. I tried resizing images like you said but it did not change! Thanks again!