New to the community? Start here

issue with appearance between desktop and tablet mode

Hello, You may not be who can help with this but we are having an issue with how the site looks when moving between desktop mode and tablet mode (using the actual window size, not clicking “desktop” or “tablet” when in the Divi builder. I have a chromebook laptop that has measurements that fall between that of “desktop” vs “tablet” mode and the header and everything isn’t formatting correctly. I have googled everything I can think of and am not finding the answers I need to help fix this issue. Can someone please assist or maybe point me in the right direction?

Thanks

Mon, 16 Dec 2019 17:22:41
  • Predrag Dubajic
    • Support

    Hi Louis,

    Can you tell me what the exact issue is on your screen size?
    I see that on screens between 981 and 1285 pixels the buttons in header start dropping in the second row, is that the problem that you’re referring to?

    If that is the issue you are referring to can you tell me what exactly are you looking to do with this?
    Were you thinking to change the menu to hamburger menu on such screen sizes as well?
    You should be able to do that with some CSS by going to Divi > Theme Options and in Custom CSS field paste this code:

    @media (min-width: 981px) and (max-width: 1285px) {
	#et_mobile_nav_menu {
	    display: block;
	}

	#top-menu {
		display: none;
	}
}

    Best regards,
    Predrag

  • Louis Gouletas
    • Design Lord, Child of Thor

    Hi Predrag,

    Thank you so much for the fast reply! Yes, the menu is part of it and that absolutely helps and I will add that right away, but the other part is the hero/header area and all of the text is overlapping and the boxes are changing size. This is visible on a smaller laptop screen that’s larger than a tablet. Please see attached.

    Thank you!

  • Louis Gouletas
    • Design Lord, Child of Thor

    Hi Predgrag,

    Thank you so much for the quick reply. Yes, the menu is absolutely part of it and I will use that CSS to correct that issue. The other issue is in the hero/full width header where the text starts overlapping and the boxes start to change sizes. Please see attached screenshot. Thank you so much!

  • Adam
    • Support Gorilla

    Hi Louis Gouletas

    I checked the site and I think this is related directly to the margin settings of the overlapping section. The row that contain those three boxes has, for some reason, a top margin set to negative value of 106 pixels

    margin-top: -106px

    and that causes it to be moved up. Arbitrary pixel values are working fine if they are “in relation” to some “predictable” element but if they are in relation to a “fluid/flexible” dimensions “wrapper” (in this case – going all the way up the DOM tree – simply to browser size), they become kind of “relative” and might actually be putting the element in a bit unexpected position.

    I’ve tested it in browser by simply disabling that margin and it seems to fix the issues for all “non-mobile” screen sizes.

    I didn’t make changes on site but you can change that margin to 0 by editing the page in Divi and changing it in the settings of the row that holds these three “boxes”:

    [attachments are only viewable by logged-in members]

    if you set that margin to 0 they shouldn’t overlap anymore.

    Best regards,
    Adam