Return to previous page

Issue using parallax effect / responsiveness

This topic has 8 replies, 5 voices, and was last updated 9 years, 7 months ago ago by Eva Kemp

Jonasurs

Participant

April 10, 2015 at 13:29

Hi there,

I have a parallax issue.

If I use the parallax effect with a full-width section it works as long as I use the desktop version. If I downsize the browser window or surf with an tablet / cell phone, the parallax effect doesn’t work. It shows the background color as a frame, half of the text and half of the picture.

Pls. let me know what to do or/and check (see hidden content).

Thanks,
Jonas

Please, contact administrator
for this information.

#56208 Copied Theme version: latest WooCommerce version: latest

7 Answers
Eva Kemp

Support staff

April 10, 2015 at 14:25
Hello,

You can try to use this code in custom.css file:
```
@media (max-width: 480px) {.et_section.parallax-section {
    background-size: 100% 100% !important;
}}
```
Please note background images may be distorted because of mobile layout.

Regards,
Eva Kemp.
#56223 Copied
Robert Hall

Support staff

April 10, 2015 at 14:39
Hello,

I’ve added following code in custom.css file. Please clean all cache and check.
```
@media (max-width: 1200px){
.et_section.parallax-section {
  background-size: cover !important;
}
}
```
Regards,
Robert Hall.
#56230 Copied
Jonasurs

Participant

April 12, 2015 at 10:52

Hi you both,

thanks for your reply.

I tried both codes – doesn’t work. The problem is that the background picture doesn’t cover the section (center center) if the window is “smaller” –> e.g. with 7″ (http://responsivetest.net/#u=http://new.kaffeefaktur.com|1024|768|1)

Can you please check this again. Thanks,
Jonas

#56418 Copied
Jonasurs

Participant

April 13, 2015 at 10:52
Hi again,

I tried to fixe the problem on my own – now I found out that this is a theme bug.

If you go at http://themeforest.net/item/legenda-responsive-multipurpose-wordpress-theme/full_screen_preview/5888906 and decrease the window size until you activate the responsive.css you will see it perfectly at the section “OUR COMPANY ACHIEVEMENTS”.

The parallax effect doesn’t work in a proper way with the text in the section. What I did now is the I deactivate this code at the responsive.css
```
/*@media (max-width:1200px){
	.et_section.parallax-section {
		position:relative !important;
		background-size:auto !important;
		background-attachment:scroll !important;
	}

}*/
```
So it covers the picture over the whole section.

Also I change the code at the style.css to “imitate” the parallax effect in terms of the text. Now the text (#ffffff) and the background color (#ffffff) are the same, so its is not visible the parallax effect doesn’t work:
```
.et_section {
  float: left;
  background-color: #ffffff;  /*before: #f4f4f4*/ 
  border-top: 1px solid #ebebeb;
  border-bottom: 0px solid #ebebeb;  /* before: border-bottom: 1px solid #ebebeb;*/ 
  color: #565656;
  padding-top: 30px;
  visibility: hidden;
  background-repeat: no-repeat;
  padding-bottom: 30px;
  margin-bottom: 30px;
  background-position-x: 50%;
  background-size: cover;
  overflow: hidden;
}
```
Could you please repair this with the next update and maybe give me same code so I can fix it properly?

Many thanks,
Jonas
#56504 Copied
LindaMendible

Participant

April 13, 2015 at 14:24

Hello!

Hey guys over at Legenda! You all do great work and I value and appreciate the outstanding service you provide!

Today I had an awesome Post! But unfortunately my website’s responsiveness on (Tablet and Cellphone) Menu isn’t working nor is it’s about page seen!

Noooooooooooo

Can ya help a chic out? Pleeeeeease!

Thanks Guys you all Rock!

http://www.lindamendible.com
http://www.lindamendible.com/about (Check it out on the tablet and mobile!)

with Love,
Linda M.

#56536 Copied

Brian Johnson

Member

April 13, 2015 at 14:54

Hello LindaMendible

Please provide us with wp-admin credentials to your site.

With best regards
Brian Johnson

#56545 Copied

Eva Kemp

Support staff

April 13, 2015 at 16:25

Hello @Jonasurs,

Thank you for your notification.
We’ll fix this issue in future update.

Please take our apologies for inconveniences.

Regards,
Eva Kemp.

#56574 Copied
Tagged: best selling themes, issue, parallax, responsiveness, seo friendly, woocommerce
Viewing 8 results - 1 through 8 (of 8 total)