Mixed up layout for tablet

[Anonymous]

Hi,

we just found out that the Header Layout gets completely mixed up when you see the homepage on the tablet. That means, you can not read the phone number, the address and the mail anymore correctly.

http://www.snacargo.com

Could you please check what is the problem?

Thanks,
Stephanie

[Axle Support]

Hi @snacargo

Please go to Appearance -> Customize -> Additional CSS and add these codes.

@media only screen and (max-width: 767px)
	#quick-contact {
	    float: left;
	    margin-top: 0;
	    width: 100%;
	}
	#quick-contact li {
	    margin-left: 25px;
	    padding-left: 25px;
	}

}

[Anonymous]

Hello,

I tried to add the additional CSS, but the only change which appeared was that the icons moved closer to the text in the computer view, but the tablet view stayed mixed up.

Stephanie

[Axle Support]

Hi @snacargo

We cannot see the CSS we have provided in your site. Can you please add those CSS and inform us?

We will check your site after that and provide you changes as per needed.

[Anonymous]

Hi,

If I want to add the CSS now, I get the information that there are 2 errors, which must be saved before I can save, and it might break the site.

Expected LBRACE at line 8, col 2

What should I do now?

Thanks,
Stephanie

[Axle Support]

Please use this code

@media only screen and (max-width: 767px){
	#quick-contact {
	    float: left;
	    margin-top: 0;
	    width: 100%;
	}
	#quick-contact li {
	    margin-left: 25px;
	    padding-left: 25px;
	}

}

[Anonymous]

Hi,
this CSS is now published, but it still needs some small modification.
1. In the tablet view it is now all in one line, which is great, but could it be also centralized? It looks a little to the left right now.
2. Now in the smartphone view the phone number looks like a out of line a little (too much to the left).
Thanks,
Stephanie

[Axle Support]

Please remove previous codes and use this:

@media only screen and (max-width: 767px){
	#quick-contact li, #quick-contact li:first-child {
	    margin-left: 20px;
	    padding-left: 27px;
	}
}

@media only screen and (max-width: 479px) {
	#quick-contact li, #quick-contact li:first-child {
	    margin-left: 15px;
	    padding-left: 10px;
	}
}

[Anonymous]

Hey,

so the tablet version works fine now, but on the mobile phone it gets mixed up again as soon as you turn the mobile phone horizontal.

Thanks,
Stephanie

[Axle Support]

Hi @snacargo

Can you please send us screenshot of the issue?

[Author]

Posts