VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
CHECK OUT OUR PAGE ON GOOGLE +
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Welcome, Guest
Username Password: Remember me

Header images not opaqued in the mobile version
(1 viewing) (1) Guest
  • Page:
  • 1
  • 2

TOPIC: Header images not opaqued in the mobile version

Header images not opaqued in the mobile version 21 Jun 2016 22:52 #9062

Accessing with a mobile device, the header image e.g. in the page
index.php/portfolio/portfolio-masonry/item/9-art
is not opaqued (as it is the case when accessing from a PC).
How can I fix this? Thank you!

  • Posts:4
  • tiaschaer
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: Header images not opaqued in the mobile version 23 Jun 2016 03:48 #9073

Try to add css:
 
@media screen and (max-width: 1024px){
.dark-wrapper{ position: relative;}
.dark-wrapper:after{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0, 0, 0, 0.8); content: '';}
.dark-wrapper .section-inner { position: relative; z-index: 10;}
}
 


joomfreak

  • Posts:2017
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: Header images not opaqued in the mobile version 23 Jun 2016 09:40 #9074

Thank you!

This works, but the gray box is too deep in the bottom part (see attached screenshot).

In addition: Should I add the same code also to e.g.
@media screen and (max-width: 768px){ ...
@media screen and (max-width: 600px){ ...
and so no?

(Sorry, for some reason it looks like I am not able to add png or jpeg attachments...)
Last Edit: 23 Jun 2016 09:50 by tiaschaer. Reason: Missing screenshot (again)

  • Posts:4
  • tiaschaer
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: Header images not opaqued in the mobile version 24 Jun 2016 03:03 #9078

Try to use Google Chrome browser to attach screenshot.
 
@media screen and (max-width: 1024px){
.dark-wrapper:after{ background: rgba(0, 0, 0, 0.8); }
}
 


You can change value 0.8 to number between 0.0 (fully transparent) and 1.0 (fully opaque).

joomfreak
Last Edit: 24 Jun 2016 03:04 by isupport.

  • Posts:2017
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: Header images not opaqued in the mobile version 26 Jun 2016 14:19 #9084

Attached the screenshot showing the too high gray box. Similar behavior with Chrome on Android and with Safari on iOS.
Attachments:
  • Attachment This image is hidden for guests. Please log in or register to see it.

  • Posts:4
  • tiaschaer
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: Header images not opaqued in the mobile version 27 Jun 2016 03:34 #9087

Did you try to change opacity value? From 0.8 to 0.6, example.

joomfreak

  • Posts:2017
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
  • 2
Time to create page: 0.66 seconds

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.