Jump to content
GreyFoxWebDesign

Section Width on Mobile (iPhone issue)

Recommended Posts

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

A.jpg

B.jpg

C.jpg

Share this post


Link to post
Share on other sites
Simon

you should use media queries that target the specific phones directly.

are you on windows or a mac? if the latter you already have fully functioning iphone and ipad using xcode 

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

    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • 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?
    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
×