Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 24, 2015 at 12:52 am #508120
    chickeringco

    Hello,

    I have an issue with a site I built with Enfold that looks cut off on an iPhone. I think it may be because I have added a custom widget to the header area with an image.

    I also have the following custom CSS that may be causing the issue.

    #header .widget {
    left: 56%;
    padding-top: 0;
    position: absolute;
    top: 0;
    width: 90%;
    transform: translate(-50%);
    }

    nav.main_menu {
    bottom: -15px;
    }

    How do I get the correct look while still using the header image?

    Below are links to screen shots of what I see.

    http://www.southcitybail.com/temp/IMG1.PNG
    http://www.southcitybail.com/temp/IMG2.PNG

    Thank you for your help!

    • This topic was modified 9 years, 2 months ago by chickeringco.
    September 24, 2015 at 3:36 pm #508537
    Andy

    Hey Tony!

    control it using this code in Quick CSS field:

    @media only screen and (max-width: 767px) {
#header .widget {
    left: 50%;
    padding-top: 0;
    position: relative;
    top: 0;
    width: 100%;
    transform: translate(-50%);
    margin: 20px 0;
}
}

    and adjust as needed.

    Cheers!
    Andy

    September 24, 2015 at 7:37 pm #508671
    chickeringco

    Thanks Andy,

    I tried it but it didn’t have any effect … any other suggestions?

    September 25, 2015 at 10:23 am #508872
    Ismael

    Hi!

    We modified the code above. Please test it again. :)

    Best regards,
    Ismael

    September 25, 2015 at 8:03 pm #509261
    chickeringco

    Hi Ismael,

    That worked a little better as far as moving the image in but now the logo overlaps the widget. What I am trying to achieve is for the images to shrink relative to the screen size. Also, the slider images below the header do not resize for the screen size either. This is a responsive theme is it not?

    Thank you for your help!

    September 25, 2015 at 11:06 pm #509297
    Andy

    Hi!

    I can’t see that the logo overlaps any widget. Can you use screenshot to show us what you mean? you can use imgur.com or dropbox.

    You can control width of the slider with this code:

    @media only screen and (max-width: 767px) {
div#layerslider_3 {
width: 660px !important;
}}

    Best regards,
    Andy

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