Jump to content
Sign in to follow this  
jamiewalden

Reordering Elements and Fixing Slider Overlay on iPhone

Recommended Posts

jamiewalden    1
jamiewalden

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
James B    436
James B

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


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
jamiewalden    1
jamiewalden

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
James B    436
James B

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. 


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

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

Sign in to follow this  

  • Similar Content

    • jdubdigi
      By jdubdigi+
      Onepage plugin is not working on an iphone. The page does not scroll properly and sections are partially missing, any ideas what the problem could be?
    • ivaemer
      By ivaemer+
      I've got the problem with Onepage plugin ..
      First two sections - Intro and Gallery Module are not showing on iPhone and iPad...help asap please
       
       
    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, so I have an issue that seems specific to iPhones.
      I have 2 "Menus" in a container both set to 6 columns (see image A) - I have added the classes .menuleft and .menuright
      When this gets to 768px and the mobile menu kicks in, both sections revert to 12 columns (or 100% width) so the 2 menus are stacked on top of each other. I want them to remain inline so that they look like image B - so need to control the section width.
      I have added the following CSS:
      .menuleft[class*='pl-col-'] {
        max-width: 22%;
        margin-left: 3%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      .menuright[class*='pl-col-'] {
        max-width: 74%;
        margin-right: 1%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      This works well for Android phones, on all online emulators and in Chrome mobile inspector, but does not seem to work on iPhones. I don't have an iPhone so it's very hard to test. Any help would be appreciated. The site is currently live at quitegoodcards.com.
      PS Is there a way to target the li items in the mobile menu toggle (image C) that does not effect the desktop li? There doesn't seem to be a separate class to apply.
      Thanks in advance



    • Bleuy
      By Bleuy+
      Problem: Full Screen Revslider content runs off the screen on mobile devices (particularly calls to action buttons).  I've used the <br> to break up the text, however the call to action buttons run off the screen.  Therefore without making the fix too technical (and I can see some VERY technical resolutions on here) my client just wants to simple centre justify the text when being viewed on a mobile device.  
      Any ideas on how best to achieve this in a simple, non too technical way?
      Thanks very much in advance
       
    • bartok
      By bartok+
      Masonic gallery sorting feature does not work in portrait mode on iPhone. After selecting an individual category and then scrolling down the page, every box reappears. Test it out for yourself: http://themes.pagelines.com/dms/portfolio-fullwidth-masonry/. What is the fix for this?
×