Archived

This topic is now archived and is closed to further replies.

  • 0

Responsive Design Issue On Iphone


Question

Posted · Report post

Hello everybody,

 

Here's an issue I can't fix.

Please have a look below to 5 screen shots of my homepage displayed:

As you can see, there is a white space between the header and the first pin (I use the great Postpin section to display posts) when browsing my homepage on iPhone.

 

I probably did something wrong within my CSS code. Could anyone help me on this?

Thank you!

 

Jean-Philippe

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Well, sorry guys.

I just found my mistake. I added this piece of code in my CSS:

 

.page-canvas {padding-top: 40px !important}

 

That's why...

 

So I did this:

 


.page-canvas {padding-top: 0px !important}
#pagelines-postpins {padding-top: 40px !important}

 

And now it seems to be ok.

Sorry again for this "fake support topic".

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, what css code have you applied to that section so far? Anything to the top of the page/background or any mobile specific css?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

No mobile specific CSS (I mean I don't think so - I started to learn CSS last year).

Here's the code I applied to this navbar:

 

.navbar.pl-color-grey {
background-image: url('http://www.photoreview.fr/wp-content/images/footer-bg.jpg');
opacity: 0.9;
}
.navbar.pl-color-grey .navline > li > a {
text-shadow: none;
color: #ffffff;
font-family: 'Droid Sans', sans-serif;
}
.navbar.pl-color-grey .navline > li > a:hover {
color: #F89406 !important; text-shadow: none;
}
.navbar.pl-color-grey li.current-menu-item > a {
color: #F89406 !important; text-shadow: none;
background-color: none;
}
.navbar .navline > li.current-menu-item > a {
background-color: none !important
}
.navbar.pl-color-grey .navline > li.current-menu-item > a {
background: none !important
}
.navbar.pl-color-grey .navline > li.dropdown.open > a {text-shadow: none}
.navbar .plbrand .plbrand-text {font-family: 'Lobster';
font-size: 2em;
color: #ffffff;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
padding-left: 20px;
}

 

I will keep you posted about "anything to the top of the page/background?"... need to search!

Share this post


Link to post
Share on other sites