Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 20, 2013 at 4:29 am #202416
    EMS4HIM

    I’m having an issue with the logo, main “Full-width Slider” section on the home page, and the gallery being formatted correctly on an iPhone.

    I’m still in the building process as you can tell, but the full-width image rotator is tiny on an iphone…

    In reading other posts in this forum, I’ve modified the logo size and the spacing between the gallery items using the following styling code:

    #header_main .container, .main_menu ul:first-child > li a {
    height: 85px !important;
    line-height: 85px !important;
    }
    #main {
    padding: 125px !important;
    }
    .logo img {
    height: 85px !important;
    max-width: 400px !important;
    }
    .logo {
    max-width: none !important;
    }

    .grid-entry .inner-entry {
    margin-right: 20px;
    margin-bottom: 20px;
    }

    @media only screen and (max-width: 767px) {
    .responsive .logo {
    height: 60px;
    }
    }

    Any help you can offer would be much appreciated!

    Eric

    • This topic was modified 10 years, 10 months ago by EMS4HIM.
    December 20, 2013 at 4:35 am #202418
    EMS4HIM

    The homepage also won’t do a “full-width” slider, they’re staying boxed for some reason. It used to – I guess something in the custom CSS I added is changing that?

    December 20, 2013 at 5:06 pm #202615
    Yigit

    Hi!

    Please deactivate all active plugins and check if that helps.

    Best regards,
    Yigit

    December 20, 2013 at 7:33 pm #202662
    EMS4HIM

    All plugins are deactivated. The only one I had installed was a Google Maps plugin to show a map on the contact page. There are no other plugins installed, nor active.

    Do you think that the custom CSS code is causing the problem?

    Is there additional code I can add that may force the fix?

    Eric

    December 20, 2013 at 7:56 pm #202675
    Devin

    Hi!

    This css is causing all your issues:

    #main {
padding: 125px !important;
}

    The main div is the wrapper for all your content and adding in all that padding is causing things not to be full width and be entirely too small on mobile layouts.

    Cheers!
    Devin

    December 21, 2013 at 12:01 am #202744
    EMS4HIM

    Thank you! That fixed the mobile layout. Is there a way to make the main “fullwidth slider” images on the home page be taller on the mobile site, but not on the normal browser?

    They just look so dinky on the mobile site.

    Thanks,

    Eric

    December 21, 2013 at 12:04 am #202745
    EMS4HIM

    Also – is there a way to keep the logo from shrinking down when the page scrolls down? or let it shrink but keep it centered vertically in the space?

    Thank you guys for your prompt attention to these questions! This site is for a Christmas present so I really appreciate it!

    Eric

    December 21, 2013 at 12:30 am #202750
    EMS4HIM
    This reply has been marked as private.
    December 21, 2013 at 10:31 am #202846
    Ismael

    Hey!

    You can experiment with this css modification to increase the height of the slider images on mobile view.

    @media only screen and (max-width: 767px) {
.av_slideshow_full li img {
border-radius: 0px;
min-height: 200px;
min-width: 500px;
margin-left: -200px;
}
}

    Regards,
    Ismael

    December 23, 2013 at 8:11 am #203185
    EMS4HIM

    Yeah that makes them look funny? is there a way to keep the images centered vertically but still increase their height (mobile version only)?

    Also – The main header with logo (on a normal web browser) doesn’t shrink in size like the logo does….

    Thanks

    Eric

    December 23, 2013 at 11:11 pm #203387
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .logo img, .logo a, .logo { max-height: 85px!important; }

    I am not sure if i understood image question clearly. Can you elaborate and/or post a screenshot of what you would like to achieve?

    Cheers!
    Yigit

    January 9, 2014 at 8:08 am #207263
    EMS4HIM
    This reply has been marked as private.
    January 9, 2014 at 8:36 am #207281
    Ismael

    Hey!

    You can add this on your custom.css or Quick CSS to move the caption more to the right:

    @media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption {
left: 150px;
}
}

    Cheers!
    Ismael

    January 24, 2014 at 10:29 pm #214617
    EMS4HIM
    This reply has been marked as private.
    January 25, 2014 at 3:08 am #214670
    Ismael

    Hi!

    Please add this at the very bottom of the code you posted above:

    @media only screen and (max-width: 767px) {
.responsive .logo {
height: 85px;
width: 400px !important;
position: relative;
left: -60px;
}
}

    The logo should look like this on mobile view:

    Cheers!
    Ismael

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Mobile site not formatted correctly…’ is closed to new replies.