Problem with mobile version

Hello!
I have problems with the mobile version of my site http://dorotagromnicka.pl.
The mobile home page takes a while to load an therefore I would remove the slider from it.
After searching the forums I've found a solution and added the following code to the Custom CSS:

Code:

@media only screen and (max-width: 767px) {
.flexslider {
display: none;
}}
 
@media only screen and (max-width: 767px){
.header_wrapper .call-us {
display:none;
}}

Now the page loads faster but I have problems with pagination. There's a huge gap in the home page header. I've tried to correct this by adding

Code:

@media only screen and (max-width: 767px){
.header_wrapper {
margin-top: 15;
}}

It worked partially on all child pages but not on the home page. Furthermore all child pages display the logo and nav menu not in the centre.
Please see the screenshots.

Code:

@media only screen and (max-width: 480px){
.header_wrapper .logo img {
margin-left: -50px;
}}

Didn't solved the problem as it moved the logo on both home (where it was properly centered) and child pages.

Could you please assist me?
Many thanks.

KR,
JAG

 

Hello,

Paste the following code in your Custom CSS
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

@media only screen and (max-width: 480px){
.home .header {
position: absolute;
top: 30px;
left: 3%;
}
header.not_home {
position: absolute;
top: 0px;
left: 3%;
}
}

This will solve your issue.