Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 23, 2016 at 5:48 am #727809
    tuphoff

    If someone could check out my site on desktop and then on mobile and give some advice, I’d greatly appreciate it – http://www.tinahealthcoach.com – I’ve got some issues with the appearance of the mobile version of the site.

    So first off, obviously the header is looking funny – I’ve got a navy banner that doesn’t stretch all the way across like it does on desktop, and the banner with contact info and social icons gets wonky. That’s my biggest problem right now and I have no idea how to solve it.

    Secondly, I’d like to add some padding to the right side site-wide. Thirdly, I’d like the pages with images (About and Home) to move the image back up to the top.

    Thanks for reading!

    December 23, 2016 at 8:51 am #727854
    Vinay

    Hey tuphoff,

    1. I checked your site header on my Android phone please check the screenshot. If this is not what you see on your phone please let us know which device and browser you are using and share a screenshot of the issue. You can upload the screenshot to imgur.com and share the link here.

    2. To add padding and set the width of the container -Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #main > .container_wrap_first > .container .template-page {
   padding-right: 30px!important;
   position: relative;
   max-width: 70vw;
   left: 50%;
   transform: translateX(-50%);
}

    3. Could you please elaborate the issue.

    Request you to open new tickets in future for different issues so we can provide you with faster and streamline solution :)

    Best regards,
    Vinay

    December 23, 2016 at 5:17 pm #727995
    tuphoff

    Thanks for the response! The code you provided adds the padding I wanted to the right side, but unfortunately also forces the left side over pretty far. I only need the padding added to the mobile version of the site, if that’s possible.

    Your screenshot is correct – I’d like the navy line (which is a bottom-border) to stretch the full width of the page, on both desktop and mobile. I’m not sure what to do about the top bar with the social icons to make it look better on mobile.

    Sorry for trying to address so many issues within one post! The third problem I was trying to describe was that pages featuring an image at the top, Home and About, end up having the image at the bottom when viewing mobile.

    December 28, 2016 at 11:10 am #728352
    Nikko

    Hi,

    Try adding this code at the bottom of Quick CSS (located in Enfold > Styling):

    #header_main .container {
    max-width: 100%;
}

#header_main .container .inner-container {
    max-width: 1310px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width:767px) {
  #header_main .container.av-logo-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #header_main .container.av-logo-container .inner-container {
    padding: 0 10px;
  }

  .content {
    padding-left: 0;
    padding-right: 0;
  }
}

    Let us know if this helps on the issues.

    Best regards,
    Nikko

    January 3, 2017 at 2:03 am #728806
    tuphoff

    Thanks, this addresses my problems sufficiently!

    January 3, 2017 at 5:50 am #728843
    Rikard

    Hi,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.