Archived

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

  • 0

Reordering Elements and Fixing Slider Overlay on iPhone


Question

Posted · Report post

Hey guys,

 

I'm having trouble with the layout on my iphone version of the site (http://stage.americandatanetwork.com). 

 

I'd like to put the navigation menu above the search bar. Currently they are the other way around. (That or hide the search bar.)

 

Also, the overlay on the slider covers the entire slider. Is there a way to rectify this somehow? Perhaps deliver slider text below the image or something. Not sure what the solution might be on this one.

 

Thanks so much for your help. 

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi there,

 

Unfortunately you can't change the stacking order in mobile view for the items inside the nav. You could use browser specific css so that you could hide the sidebar on mobile devices. We have a browser css plugin - http://www.pagelines.com/store/plugins/browser-css/

 

Once you have that you can use the guide here to apply the css edits - http://support.pagelines.me/docs/plugins/browser-specific-css/

 

How have you set your slider up? Is it using a static figure or aspect ratio? Have you used any css on the slider to set anything with a set px width/height that could be stopping it from acting responsive?

 

If you'd rather have the site display as it does on the desktop you can turn off the mobile view in the layout editor. It will still fit into the screen, but the layout won't stack the various elements

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the response. Perhaps I should have been more clear. The size of the slider image is responding properly as i have it set to aspect ratio. However, the overlay is what doesn't look right. You can see in the attached screenshot. I don't have any css that's causing it as i commented out all of my slider css and the issue still persists. 

 

My slider CSS:

 
#feature_slider .fcontent {
text-shadow: none;
}
 
#feature_slider .fcontent a{
background: #ebebeb;
color: #333333;
border: 1px solid #ffffff;
text-shadow: #fff 0 1px 0;
}
 
#feature_slider .fcontent a:hover{
background: #ebebeb;
color: #000000;
border: 1px solid #ffffff;
text-shadow: #fff 0 1px 0;
}
 
#feature_slider .fcontent a:active{
background: #ebebeb;
color: #000000;
border: 1px solid #ffffff;
text-shadow: #fff 0 1px 0;
}
 
#feature a.pagelines-blink.black-blink:active .pagelines-blink-pad {
background: #dadada;
border: none;
text-shadow: #fff 0 1px 0;
}
#feature_slider span.pagelines-blink-pad {
border: 0px;
}
photo-21.jpg

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, I see what you mean now.

 

I've just done the same setup and it's happening to me too. http://screencast.com/t/GzG0zODMRAB

 

I'll log this as a bug and get it looked into. 

Share this post


Link to post
Share on other sites