Jean-Philippe

Responsive Design Issue On Iphone

4 posts in this topic

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


www.photoreview.fr | www.kankei.fr

Share this post


Link to post
Share on other sites

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?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

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!


www.photoreview.fr | www.kankei.fr

Share this post


Link to post
Share on other sites

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".


www.photoreview.fr | www.kankei.fr

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Similar Content

    • mnagillum
      By mnagillum+
      The site I'm working on--ndtest.mamulligan.com--is working at all on mobile devices. The home page image is not resizing at all. Is there a way to eliminate that image just for mobile? Another site I work--leedems.org--on uses some identical components, but it works just fine on mobile. What can I do to get this site to work on mobile? Thanks in advance.
    • sfmstudios
      By sfmstudios+
      I'm having trouble figuring out how to manage the responsiveness on my fixed header.  I have two NavBars (one left for social icons, and one right for main page navigation).  When the screen width shrinks to less than 830px, the wrapping begins with the social Navigation, and eventually two "Menu" buttons appear for the mobile view.
       
      What I'd like to have happen is the social navigation to stay visually as-is, and the page navigation to switch to the "Menu" button, all staying on the same single line.
       
      Can someone lead me in the right direction?  Thanks!
       
      Website is: http://bodyandsoulcoaching.com
       
      Screenshot of current responsive look.
    • Jean-Philippe
      By Jean-Philippe
      Hi PageLines Team! Happy new year to your all!
       
      I just wanted to let you know that Photoreview, the website I designed and launched last october has been featured next to Microsoft, ZDNet, and Gamekult in an article about French responsive design websites on Presse-Citron.net (very famous French high-tech blog).
       
      Here's the link (in French): http://www.presse-citron.net/10-sites-francais-qui-ont-deja-adopte-le-responsive-design
       
      Our team at Photoreview are very proud of it and I wanted to thank the PageLines team for the great work and support you provide since I started to learn WordPress, HTML, CSS and so on... just two years ago.
       
      Jean-Philippe