Tablet view discrepancies

As advised here, I’m gonna post the first problem separately. Although it’s very hard for me to sort these things out because they seem to be all connected, so I apologize for being quite chaotic.

This is my first experience with responsive design and so far I haven’t entirely understood how it works with all this variety of screen sizes.

I used some custom css for Tablet view to move the logo and the menu button in the right place and it looked perfectly fine in Customizer:


These are all used custom css for Tablet view:

/*------Tablet view-------*/
    
@media only screen and (max-width: 768px) {
.site-logo {
    max-height: 60px !important;
	margin: 0% 90% 0% 2%;
}
	
	.btn-menu {
color: #000 !important;
	margin: -55px 0% 0% 90%;
}

body.home .col-md-4.col-sm-8.col-xs-12 {
    background-image: url('http://2-the.com/wp-content/uploads/2019/03/T.H.E-LOGO-Green..png');
    background-repeat: no-repeat;
    background-size: contain;
		margin-left: 5%;
		filter: none;
}
		#mainnav-mobi ul.sub-menu > li > a {
		background-color: #0c0c0c;
	}
	
.text-slider h2.maintitle {
    font-size: 30px !important;
}

.text-slider .subtitle {
	font-size: 20px;
}

	.button-slider {
		display: none;
	}
	
.sydney-hero-area {
    height: auto !Important;
}

.header-slider {
    height: 350px !important;
}
	
	.page-wrap {
		padding-top: 0px;
	}
	
	.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {
		padding-top: 0px;
		margin-top: -30px;
	}	
}

Then I tested it on my iPad mini 2 and this is what I found in portrait view:

and landscape view:

The above-posted screenshots show the homepage. On other pages the menu button doesn’t appear at all:

The questions are:

  1. How to ensure that the menu button is in the same place on all tablet/mobile devices?
  2. How to enable the menu button on tablet in landscape view and use the same logo?

This is my page http://2-the.com/

Hello,

Can you please disable the CSS code that you mentioned above and leave here a note?

Kind Regards, Roman.

Hi Roman

Thanks for your reply. I have removed all above mentioned codes

Okay, you can try to disable this code as well:

/*------Header--------*/

.header-clone {
    	display:none;
    }

    .site-header {
      background-color: transparent !important;
    }

.home .site-header {
background-color: transparent !important;
	position: absolute;
}

…and set #17793f for Menu background in Customize → Colors → Header section.

Also you can set logo image in Customize area instead of adding it manually through CSS in order to make it look properly on phones.

Kind Regards, Roman.

I’m sorry but I don’t see how this may help… I’ve done everything you advised and now there is no menu button on any page. Besides I don’t understand how I can ever adjust it properly if Customer preview is totally different from the actual device.
Removal of the Header css gave an extra space between the header and body.

The only reason why I set the logo manually is because I need it to be white on the homepage and green on other pages.

I don’t need the header to be green…

Sorry but I’m even more confused now :worried:

Hello,

I tried to help you to achieve what you want with default theme features. But it looks like there is no easy way to do it because you have much additional CSS code for extra features.

So it looks like this issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork. Hope for your understanding.

Kind Regards, Roman.

Yes, I totally understand and appreciate your support.

Last try. Let’s say now I removed all custom css for header, logo and tablet view. Possibly I could live without them…

But why the menu button is still invisible on the white background although there is custom css to set black color for mobile and tablet view? I can spot this button, blindly touching the screen and it works. And it’s in the right place now btw. But I need it to be black. Any ideas?

Okay, please make sure that Mobile menu button color is not white in Customize → Colors → Header section.

Kind Regards, Roman.

1 Like

Ohhh, I feel so silly! I got so carried away, looking for custom css, that it didn’t cross my mind to check Customizer :joy:

Thank you very much for your patience!

That’s okay, you are welcome!

And have a nice day :slight_smile:

Kind Regards, Roman.

1 Like