Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 18, 2018 at 6:27 pm #958760
    martinelovik

    Hi I’m having a problem with my site not being responsive on mobile. It looks fine when I preview it on my desktop, but it does not respond as it should when I open it on my mobile. How do I fix this?

    May 20, 2018 at 5:36 am #959294
    Rikard

    Hey martinelovik,

    Your site looks fine on my end on mobile, what exactly are you having problems with?

    Best regards,
    Rikard

    May 20, 2018 at 9:00 am #959343
    martinelovik

    On mobile preview on my desktop it looks like this https://imgur.com/a/EifiLiW, which is what I want, but when I open the site on my phone it looks like this https://imgur.com/a/bPWgOZr

    May 21, 2018 at 11:11 am #959651
    Victoria

    Hi martinelovik,

    Do you mean you want the logo and the burger bigger?

    Best regards,
    Victoria

    May 21, 2018 at 7:41 pm #959926
    martinelovik

    Yes, I do want the logo en the burger bigger, but I’m also having issues with the elements on all the pages not responding how they should. It looks just how I want it in my preview, but on my phone it doesn’t seem to scale at all. I’ve also set the headline rotator to not be shown on mobile, yet it’s still there.

    • This reply was modified 6 years, 6 months ago by martinelovik.
    May 23, 2018 at 3:38 pm #960865
    Victoria

    Hi martinelovik,

    What are the screen sizes in the preview and on your mobile? Which iPhone is that?

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a,
    .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
      height: 150px;
      line-height: 150px;
    }
    .av-hamburger-box {
         width: 70px;

    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    May 24, 2018 at 9:27 am #961389
    martinelovik

    I added the code, but it does not seem to work no matter where I add it to.
    I am on the Iphone 7, but am unaware how large the screens are. I think the issue is that the resolution on the retina iphone screen is larger than the set size for the mobile settings?
    How can I fix this

    May 28, 2018 at 5:04 am #962926
    Ismael

    Hi,

    Thanks for the update. Please try to use this css code to increase the size of the logo and adjust the position of the mobile menu container.

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
    height: 180px;
    line-height: 180px;
}
}

    Best regards,
    Ismael

    May 28, 2018 at 8:17 am #962960
    martinelovik

    Thank you, but the code doesn’t seem to work. I also now have the problem that the text is way to large on my desktop, when I scale it down just a bit. Would it not work to just add a code to change the responsive design to show up at a larger resolution? I did actually try this, but none of the codes I add to try to fix this, seems to make any changes what so ever.. I’m starting to worry that I might have to start all over again.

    May 28, 2018 at 12:54 pm #963138
    Ismael

    Hey!

    Thanks for the update. Are you removing the browser cache prior to checking the page? Please provide the login details in the private field.

    Cheers!
    Ismael

    May 28, 2018 at 12:58 pm #963146
    martinelovik

    Yes, I’ve been removing the cache prior to checking.

    May 30, 2018 at 11:48 am #964148
    Victoria

    Hi martinelovik,

    There were symbols that were interpreted wrong in the Quick css field. The code applies now. Please check.

    Best regards,
    Victoria

    May 30, 2018 at 1:23 pm #964208
    martinelovik

    Seems like the logo is good now, but the proportions on the hamburger menu seem to be off. Also none of the other elements are responsive on my iphone, such as the social media icons in the footer and the text and images on the kontakt page. Is it not possible to change the width at which the responsive layout shows up? When I change the settings of the font-sizes in the enfold theme, it looks good on my phone, but when I scale it down on my desktop it’s way to big..

    May 30, 2018 at 3:07 pm #964297
    Ismael

    Hi,

    It looks responsive on my end. Here’s how the social icons look.

    // https://imgur.com/a/2KgstRR

    Best regards,
    Ismael

    May 30, 2018 at 3:19 pm #964310
    martinelovik

    The icons on my phone are way smaller than they appear on my laptop preview. Also the elements are not responding how they should. As you can see in the images

    June 4, 2018 at 4:40 am #966284
    Ismael

    Hi,

    Thanks for the update. This is a css media query specifically created for iPhone 7 devices.

    @media only screen and (min-device-width : 414px)  and (max-device-width: 736px) {
#top #wrap_all .avia-button {
    padding: 24px 32px 20px !important;
    font-size: 26px !important;
}

#top #wrap_all .flex_column {
    width: 100%;
    margin-bottom: 20px;
    clear: both;
}
}

    Adjust the avia-button style as needed. Don’t forget to remove the browser cache prior to checking the page.

    Best regards,
    Ismael

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