user on ipad can't access close butoon in sitewide notice

[5high-photohub]

Urgent issue with new site – your help much appreciated!

I’m sure this isn’t a common problem, as site-wide notices are meant to be short and sweet.. However, we’ve just launched and need a longer than average notice showing for users when they first log in (members only site) as it has important info for them to read.

The sitewide notice shows at the top of the site, blocking the menu and very top of the page – as normal. BUT on an ipad – and presumably on a mobile too – they can’t access the close button… so can’t close it and access the site!

I can see 2 ways to fix this:
1. either position the close button so it’s accessible at the top (or just somewhere they can access it near the very start of the message)?
2. or put the sitewide notice in a scroll box?

Please can you tell me how to this?

Many thanks.

[5high-photohub]

Update: now not urgent as have had to remove the notice and replace it with a link to the info in a page.

But it’s still something I’d like to change, so that there can be no issue in the future.

Cheers.

[Radu]

Hello,

Try to apply this little site wide notification CSS fix.

COPY CODE

#sitewide-notice #message {
  right: 0;
  left: 0;
  top: 30%;
  position: fixed;
  margin: 0px auto;
  width: 60%;
  border: rgba(0,0,0, 0.3) solid 20px;
  z-index: 9999;
 }
#sitewide-notice #message #close-notice {
  display: block;
  float: right;
  margin-top: 0px;
  background-color: #efefef;
  padding: 2px 10px;
  color: #000;
  text-transform: uppercase;
}
.buddypress div#message p, #sitewide-notice p { margin: 0; }

Let me know if this solve problem with ipad.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Hi Radu,

Thanks for your quick response. The css above is actually the one I’m using from a previous thread! So all good there.

What I was trying to do was to move the Close button (#close-notice) to the top of the message, rather than at the bottom, as I thought that might solve any future problems.

If this can’t be done then we’ll stick with very short notices!

Cheers,
J

[Radu]

Hello,

Try with css snippet

COPY CODE

#sitewide-notice #message {
  right: 0;
  left: 0;
  top: 30%;
  position: fixed;
  margin: 0px auto;
  width: 60%;
  border: rgba(0,0,0, 0.3) solid 20px;
  z-index: 9999;
 }

#sitewide-notice #message #close-notice {
  display: block;
  float: right;
  margin-top: 0px;
  background-color: #555;
  padding: 2px 10px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  right: 0;
}

#sitewide-notice #message #close-notice:hover { background-color:#333; }

.buddypress div#message p, #sitewide-notice p { margin: 0; }

With this code close button will be in right top.

Let me know if is ok.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Thanks for that – I’ll review it when we’re next in maintenance and I’ll update you then.
Cheers.

[5high-photohub]

Hi Radu,
Yup, that code worked OK, though in retrospect I think it’s best to keep the notices short and sweet with the close button at the bottom (where you have it usually) so it encourages people to read it first!
many thanks for your time and help – maybe this will be useful for someone else too!
Cheers,
Jenny

[Author]

Posts