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

Problem on mobile for "section-dark" position
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Problem on mobile for "section-dark" position

Problem on mobile for "section-dark" position 02 May 2016 22:07 #8746

Hi,

there's a problem when you visit with a mobilephone a website with jf-salina template installed, and modules in "section-dark" position.
Infact, not all the mobile browsers support the "transparency" applied by the declaration:
rgba(255,255,255, 0.6);


I checked the "tamplate.css" file, and the problem is with these classes: ".opaqued-bg" and ".dark-bg .parallax" (row 262).

 
 
section.section {
border-bottom: 30px solid;
}
 
.silver-bg {
background-color: #f2f3f5;
}
 
.opaqued-bg {
background-color: rgba(255,255,255, 0.6);
}
 
.dark-bg {
background-color: #2b2b2b;
}
 
.dark-bg.parallax {
background-color: rgba(0, 0, 0, 0.8);
}
 
 
 


I need a fallback solution.

How can I fix it?

Thank you
Last Edit: 02 May 2016 22:10 by me.

  • Posts:45
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0

Re: Problem on mobile for "section-dark" position 04 May 2016 21:32 #8763

Any suggestion?

  • Posts:45
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0

Re: Problem on mobile for "section-dark" position 06 May 2016 03:41 #8776

You can create transparent image then apply css property background for these elements.

joomfreak
The following user(s) said Thank You: me

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

Re: Problem on mobile for "section-dark" position 08 May 2016 20:54 #8783

In my own case this solution don't work.
I have tried to apply a repeated transparent png level, using this properties:

 
.dark-bg.parallax {
background: transparent url("../images/trasp.png") repeat scroll 0 0;
}
 


But this solution don't work in mobile browser, the image was displayed without transparent.

I solved modifying the jpg file, applying the trasparency inside the jpg using GIMP.
I know, this solution it's really rude, but it works

IMPORTANT: don't use image with a size that exceeded 3000 (w) x 2000 (h) px, and 700kb of weight, otherwise the loading process and resizing process goes too slowly.

Thank you
Last Edit: 11 May 2016 23:38 by me.

  • Posts:45
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0

Re: Problem on mobile for "section-dark" position 09 May 2016 03:40 #8787

Thank you for sharing your solution.

joomfreak

  • Posts:2134
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
Time to create page: 0.74 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.