Mobile Responsivity

  • Posted in : ikonik
  • koufopoulosf
    Participant

    Hello,

    I am having trouble with the css regarding media queries for shorter height smartphones (like iPhone 4/4s).

    I used this css in order to move the menu higher:
    .home-menu {
    margin-bottom: 35%;
    }

    It is working good with the following queries:
    @media screen and (min-width: 1024px)
    @media screen and (max-width: 1023px) and (min-width: 481px)
    @media screen and (max-width: 480px)

    But for smartphones with small height (like iPhone 4/4s), the menu stays higher over my banner and it’s not moving. Among others, I tried this query:

    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait)

    Which is supposed to work on iPhone 4/4s, but for some reason, it’s not working.

    What media queries would you suggest that will work on most smartphones, tablets and desktops? Should I keep those queries and add a new one for shorter smartphones? If yes, what would that query be?

    Thanks in advance!

    ahmetsali
    Keymaster

    Hi, what exactly do you want to do?

    – move your menu to the top only for iphone4 ?
    – move your menu to the top for all devices except iphone4?

    koufopoulosf
    Participant

    I want to move menu to the top (below the .home-text banner) for tablets and desktops and the menu to be down for all smartphones, in a way:

    1. For small devices – smartphones: It does not overlap the social icons or the “… music off” on the screen for small devices/screens.

    2. For tablets and desktops: It does not overlap the name (.home-text).

    The queries I used somehow work, but I have trouble with small heights (like iphone4 which I want the menu to be down, as I described above). Maybe I should use other queries. I would appreciate if you could give me the correct ones.

    Thank you very much.

    koufopoulosf
    Participant

    edit: I want to move the menu to the top below the “… music off” for desktops, laptops and tablets in landscape mode. For the tablets on portrait and smartphones (smartphones both landscape and portrait) above the “…music off” which is above the social icons. In a way:

    1. For small devices – smartphones: It does not overlap the social icons or the “… music off” (which is above social icons) on the screen for small devices/screens (like it happens with the current queries on iPhone 4) – meaning I want the menu to be above “… music off” (bottom right corner) for smartphones and tablets in portrait mode.

    2. For desktops, laptops and tablets (tablets in landscape mode): It does not overlap the name (.home-text) – meaning I want the menu to be below the name banner.

    I hope I made it more clear now as I made a mistake previously.

    Thanks.

    ahmetsali
    Keymaster

    I see, you may try this custom css code;

    @media screen and (min-width:992px){
        .home-menu { top: 80px; }
    }
    @media screen and (max-width:991px){
        .home-menu { bottom: 100px; }
    }
    

    Cheers.

    koufopoulosf
    Participant

    Great! Thank you very much!:D :)

    koufopoulosf
    Participant

    Quick question: I’ve made these changes on the .home-text:

    .home-text {
    font-size: calc(9px + 2.6vw);
    font-weight: 600;
    margin-left: -10px;
    margin-top: -2px;
    }

    and I am trying to adjust the .home-text-container:

    .home-text-container {
    width: calc(1vw * 52);
    }
    for every resolution.

    Is there a way to adjust the .home-text-container to the .home-text in the same way the .home-job-title adjusts to the .home-text-container? or I should make many breakpoints in media queries to adjust for each resolution?

    Thanks once again!!

    serkan
    Moderator

    Hi,
    I would recommend you to make breakpoints for each resolution.
    Thanks

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register