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
Hi,Edit settings
New Forum Posts0
Private Messages
Account details

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.

Show More
Welcome, Guest
Username Password: Remember me
Forgot your password? Forgot your username? Register for free
joomfreak.com Support Forum
Categories
Joomla Templates
JF Salina

Header images not opaqued in the mobile version
(1 viewing) (1) Guest
Reply Topic
New Topic
  • 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!
Reply Quote

  • 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
Reply Quote

  • Posts:2940
  • 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)
Reply Quote

  • 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.
Reply Quote

  • Posts:2940
  • 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.
Reply Quote

  • 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
Reply Quote

  • Posts:2940
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0
Reply Topic
New Topic
  • Page:
  • 1
  • 2
joomfreak.com Support Forum
Categories
Joomla Templates
JF Salina
Time to create page: 0.90 seconds
Saturday 20 April 2024

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.