VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
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:2763
  • 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:2763
  • 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:2763
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
  • 2
Time to create page: 1.19 seconds
Thursday 20 June 2019

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.