Docs

[doughballs]

Hello.

I have a few problems when my site is viewed on a mobile. No issues when viewed on desktop, but the menu does stop working on an iPad when the iPad is held portrait (works fine when held landscape?!). I will post as separate messages so that I can post separate images of the problems.

1) http://seandoherty.co.uk/mcswp/about-us/

Please visit the above link on a mobile. When the menu button is tapped, the menu drops down but it appears behind the ‘about us’ text. It needs to sit above the ‘about us’ text, on a white background. Note, if you go to another page with less text (‘services’ for instance), the drop down works fine – the white background covers the background image. It is only the ‘about us’ page which is a problem. See attached image – it is the ‘about us’ page and the same page but with the menu button tapped, side by side.

[doughballs]

2) http://seandoherty.co.uk/mcswp/contact/

Please visit the above link first on desktop, then on mobile. The contact boxes appear fine on the desktop, as white bars on top of the background images. But on a mobile, the background image disappears and the whole screen turns white. Ideally, I don’t want the top 3/4 of the screen to be a white background, I’d like some of the background image to show through (as it does on a desktop). The attached image is the desktop page and the mobile page side by side.

[doughballs]

3) http://seandoherty.co.uk/mcswp/services/

The above page works fine on desktop and mobile, but there are issues on Ipad.

a) If held landscape, the ‘services’ and ‘projects’ pages don’t load when you press them. The menu drops down fine, but to get to each landing page you have to press and hold ‘services/projects’ and wait for the pop up to appear that asks you if you want to load the page.

b) If held portrait, the drop down menu for ‘services/projects’ doesn’t work at all, and to get the landing page for each, you have to press and hold as above.

Please see the attached image, of the landscape and portrait iPad service pages, with the drop down menu working and not working respectively.

Lastly…I’m really sorry for the multiple requests! I realise the difficulty of fixing these across multiple devices. The iPad is iOS 9.3.2 by the way, using Safari.

[Rad]

Hi there,

Thanks for writing in.

1. It’s due to this CSS,

.x-navbar, .x-navbar .sub-menu {
    background-color: hsla(0,0%,100%,0) !important;
}

Please change it into this,

@media (min-width: 1025px) {
.x-navbar, .x-navbar .sub-menu {
    background-color: hsla(0,0%,100%,0) !important;
}
}

2. Please add this CSS as well,

@media ( max-width: 1024px ) {

.site {
    background-color: transparent !important;
}

}

3. iPad shares same resolution as the desktop, the menu appears on landscape mode is from the desktop. Please replace this CSS,

@media (min-width: 700px) {
  .x-nav-wrap.desktop,
  .x-nav-wrap.desktop {
    display: block !important;
  }

  .x-nav-wrap.mobile,
  .x-nav-wrap.mobile,
  .x-btn-navbar {
    display: none !important;
  }
}

with this,

  @media (max-width: 1024px) {
  .x-nav-wrap.desktop,
  .x-nav-wrap.desktop {
    display: none !important;
  }

  .x-nav-wrap.mobile.collapsing,
  .x-nav-wrap.mobile.in,
  .x-btn-navbar {
    display: block !important;
  }
  .x-btn-navbar {
	float: right;
	}
}

Thanks!

[doughballs]

Hi Rad, thanks for your reply, unfortunately this did not work.

Problem 1 – the first part of the css you asked me to change does not exist in my custom css:

.x-navbar, .x-navbar .sub-menu {
background-color: hsla(0,0%,100%,0) !important;
}

The above does not exist so I cannot change it. I tried adding the two bits of CSS, but this did not fix the problem. The drop down menu (on the about page when viewed on a mobile phone) appears behind the ‘about us’ text, so you can’t really get to the menu items. So adding the following does not work:

@media (min-width: 1025px) {
.x-navbar, .x-navbar .sub-menu {
background-color: hsla(0,0%,100%,0) !important;
}
}

@media ( max-width: 1024px ) {

.site {
background-color: transparent !important;
}

}

Lastly, I tried swapping the 3rd bit of CSS (that one did exist) and that turned the top menu (white bar fixed to the top of the page) transparent on a mobile, and completely messed up the ‘about’ page text – screenshot attached.

Let me know if you’d like me to add all 3 bits of CSS and save the site so you can view it, but for now I’m making some aesthetic changes to the site.

Sean

[Christopher]

Hi there,

#1 Please find following code and remove position:fixed; property :

.aboutBar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    max-height: 0;
    width: 100%;
    background-color: #191919;
    opacity: 0.5;
    transition: 2s max-height ease-in;
}

Or at least use media query rule to apply it to large screen sizes :

@media (min-width:979px){
.aboutBar {
    position: fixed;
    bottom: 0;
    left: 0;

}
}

#2 Please add this :

ul.sub-menu li {
    background-color: red !important;
}

#3 Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Hope it helps.

[doughballs]

Hi Christopher, thanks again but this is not the solution. Let’s concentrate on number 1 for now. The issue being:

On a mobile device, tapping the menu button when on the ‘about us’ page is causing issues, because there is some much body text on this page, the drop down menu is floating behind the body text and you cannot see the menu items. Please see the first screenshot for this, or visit this page on a mobile.

Your above suggestion, to remove the ‘fixed’ position of the about bar (the about bar is the black bar that slides up – set at 50% opacity – that contains the body text for each page), completely compromises the design of the site. The about bar needs to be fixed to the bottom of the screen and it should slides up into position. Your CSS has this bar appear at the top of the page.

I think the solution should be much simpler – we need to give the drop down menu (on a mobile, when you tap the menu button), priority over the main body text, so that it floats above it rather than below it. There is so much custom CSS now that I’m not 100% which part to fiddle with!

[Christopher]

Hi there,

How about changing z index?

Please update your code to :

.aboutBar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    z-index: -1;
    max-height: 0;
    width: 100%;
    background-color: #191919;
    opacity: 0.5;
    transition: 2s max-height ease-in;
}

Hope it helps.

[doughballs]

Christopher, that worked a treat. Thankyou. Deceptively simple 🙂

If we can just look at the second problem – this is with the contact page:

seandoherty.co.uk/mcswp/contact

Viewed on a desktop it is fine (pic1), but if you make the screen smaller (iPad and Mobile), the background becomes obscured by a white band that extends the full width of the screen. I don’t want any of this white space, I want the background image to remain visible.

The three images are as follows:

1 fullscreen
2 screen at approx 75% width
3 screen at minimum wdith

[Rad]

Hi there,

You should replace this,

@media (min-width: 980px){
.site {
    background-color: transparent;
    min-height: 40vh;
}
}

with this, without @media since you’re also targeting small devices.

.site {
    background-color: transparent;
    min-height: 40vh;
}

Thanks!

[doughballs]

Hi Rad,

Had to amend your code slightly but this has fixed the problem:

.site {background-color: transparent;min-height: 40vh;}
.site .masthead {background-color: #fff;}
}

Just needed to take the @media of the above code (you had missed the masthead line off, and the navbar had turned transparent)

Thanks again – superb support as usual!

[Paul R]

You’re welcome and thank you for your kind words!

[Author]

Posts