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

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:66
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0

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

Any suggestion?

  • Posts:66
  • 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:2725
  • 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:66
  • 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:2725
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
Time to create page: 1.26 seconds
Tuesday 19 March 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.