Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 19, 2018 at 11:43 pm #1012062
    webWahine

    Hello

    I recently got a new iPad and the resolution is different from my older one, and I noticed that when scaling down on desktop there is also a size where the logo is cut off at the bottom, and the burger sits on top. Once it gets a bit smaller it is fine. For my media queries I have everything set to the breakpoint of max 989 and then min 990 to hopefully accommodate all tablets and phones for the smaller size but I guess that this is no longer the case. I’m hoping that it’s a simple question of increasing the max to something a bit bigger, but I’m not sure. Please advise. Thank you in advance :)

    Cedar Creek

    September 20, 2018 at 11:59 pm #1012532
    Basilis

    Hey webWahine,

    Can you please show us a screenshot and the exact screen size / resolution?

    Thank you

    Best regards,
    Basilis

    September 21, 2018 at 6:44 pm #1012866
    webWahine

    Sure –
    Menu issue

    It changes to this right around 1935 pixels at 144ppi according to the size on my monitor, so when I drop it to 72ppi it comes out around 967 pixles wide.

    September 24, 2018 at 3:32 pm #1013666
    Ismael

    Hi,

    Thanks for the update. Please add this code on the Quick CSS field to adjust the logo.

    @media only screen and (max-width: 989px) and (min-width: 768px)
.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
    height: 200px;
    line-height: 200px;
}
}

    Best regards,
    Ismael

    September 24, 2018 at 7:16 pm #1013763
    webWahine

    Thanks, Ismael – the code is missing it’s first bracket –

    @media only screen and (max-width: 989px) and (min-width: 768px) {
	/* start */
			
	.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
    	height: 200px;
    	line-height: 200px;
	}

	/* end */
}

    Now I can see the whole logo but the burger is still way up at the top, over the logo – it needs to be moved below, please :)

    September 24, 2018 at 7:23 pm #1013766
    webWahine

    Ok, so I almost have it – I gave the burger a margin-top –

    	.responsive #top .av-logo-container .avia-menu {
		margin-top: 180px;
	}

    But it’s slightly off center – especially noticeable when the menu opens and shows the list below. Please let me know what needs to be changed to get the burger centered :)

    September 25, 2018 at 7:16 am #1014023
    Ismael

    Hi,

    Thanks for the update. It looks fine on my end.

    Screenshot: https://imgur.com/a/4ND0oJV

    Can you point us to the alignment issue?

    Best regards,
    Ismael

    September 25, 2018 at 6:52 pm #1014387
    webWahine

    You’re correct! It was offset to the right by about 20px but I just did a screenshot and it is definitely now centered. Thank you :)

    September 25, 2018 at 7:34 pm #1014424
    Jordan Shannon

    Hi,

    I’m glad you got this resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Adjust position of logo and mobile menu at a certain screen resolution’ is closed to new replies.