Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 21, 2021 at 6:22 pm #1274494
    Britte782

    Hi Guys,



    I’ve got a problem with making my website responsive. It seems like all – or many of the quick-css codes doesn’t work for the mobile/table size.

    

For example:
    .container { padding: 0; }
    …works for ‘normal’ screens but not for screens with +/- < 759 pixels.

    And also codes like:

    /* Sticky header on mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 60px;
  }
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}

    …doesn’t seem to work.

    Could you please have a look?

    Thank you in advance,
    Britte

    January 22, 2021 at 7:15 am #1274638
    Nikko

    Hi Britte782,

    This code only works for mobile but not on tablet:

    @media only screen and (max-width: 767px) {}

    For tablet if it’s portrait, you can use 959px, or 1024px for landscape.
    For the padding issue, I believe the reason it does not appear to work is because containers for mobile has a width and max-width of 85%:

    .responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    float: none;
}

    Try changing them to 100%.

    Best regards,
    Nikko

    January 22, 2021 at 10:01 am #1274645
    Britte782

    Hi Nikko,

    Thank you for your response.

    I understand the first code is for mobile but also for mobiles it doesn’t work. Changing it to 959px, or 1024px doesn’t make any difference.
    Unfortunately using the second code and change it to 100% doesn’t work either.

    Could you please have another look?

    Thank you
    Britte

    January 22, 2021 at 3:50 pm #1274775
    Nikko

    Hi Britte,

    Can you try to check this on desktop and use device mode and select a mobile device to emulate?
    You can get further information here: https://developers.google.com/web/tools/chrome-devtools/device-mode/
    Once done, try to inspect on the elements to know if the CSS code is being fetched or being overridden.

    Best regards,
    Nikko

    January 22, 2021 at 4:49 pm #1274786
    Britte782

    Hi Nikko,

    Thank you for pointing me into the right direction.

    I temporary deleted the quick css and only placed: 

    /* Sticky header on mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 60px;
  }
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}

    This code does something now (so there must be a problem with my added css – which I’ll find out).
    However it works for screens between 601 – 767px but for screens smaller then 600 pixels the menu drops down a bit before it sticks (see screenshots) .

    Best regards,
    Britte

    January 23, 2021 at 10:03 am #1274932
    Nikko

    Hi Britte,

    We’re glad that it helped.
    It seems you have forgotten to include the screenshot.

    Best regards,
    Nikko

    January 23, 2021 at 12:53 pm #1274955
    Britte782

    oops, see private content.

    January 23, 2021 at 12:56 pm #1274956
    Britte782

    can you add images to private data? I’ve put a link now instead since I’m not sure if it shows the img.

    • This reply was modified 3 years, 11 months ago by Britte782.
    January 23, 2021 at 1:25 pm #1274975
    Nikko

    Hi Britte,

    I can’t seem to see it in dropbox, can you try here: https://imgur.com/upload

    Best regards,
    Nikko

    January 23, 2021 at 2:03 pm #1274979
    Britte782

    Hi Nikko,

    See private content for imgur link.

    Best regards,
    Britte

    January 26, 2021 at 2:36 pm #1275491
    Nikko

    Hi Britte,

    Thanks for providing the link and I apologize for the delayed response.
    It seems that the problem you’re having is in position: fixed which has different implementations in mobile and not working properly especially on IOS devices: https://developer.apple.com/library/archive/technotes/tn2010/tn2262/_index.html#//apple_ref/doc/uid/DTS40009577-CH1-SAFARI_ON_IPAD_READINESS_CHECKLIST-4__MODIFY_CODE_THAT_RELIES_ON_CSS_FIXED_POSITIONING
    You can however find some codes online that might help but it seems it’s much better to not use position fixed on mobile.

    Best regards,
    Nikko

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