Color Section Background Image Responsive Design - Support | Kriesi.at

Tagged: color section; background image

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
January 16, 2024 at 1:43 pm #1430251
josikrop1
Participant
Hi guys, I’m sorry to open a new thread but I can’t find a solution to my problem and I think I need individual help. I also read the Enfold manual and tried to solve this with this link, but it won’t work.

Color Section

I used the CSS snippet:
```
/* Section mobile bg image*/
@media only screen and (max-width: 767px) {
#top #section-mobile-bg {
   background-image: url(https://hauptwerk-zt.at/wp-content/uploads/2024/01/rendering1_smartp.jpg)!important;
   background-position: 0% 50%!important;
}
}
```
I tried this snippet in the Quick CSS Box and in the custom.css file. Other snippets work out fine but not this one.
In the color section background box for developers I added the line “section-mobile-bg”. I also tried it with “#section-mobile-bg” always without “”.
Is there any problem with my syntax or what can be the problem, that the picture doesn’t change?
I’m an architect and not a coder, so sorry if this is a stupid question.

edit:
Parallax is active.
- This topic was modified 10 months, 2 weeks ago by josikrop1. Reason: added information
- This topic was modified 10 months, 2 weeks ago by josikrop1. Reason: spelling
January 16, 2024 at 4:24 pm #1430723

Rikard
Keymaster

Hey josikrop1,

I can’t find the ID in question on the page you linked to. If you need help adding that and the CSS, then please post admin WordPress login details in private.

Best regards,
Rikard

January 16, 2024 at 4:41 pm #1430729

josikrop1
Participant

Thanks for your response Rikard. I tried another solution but I think the solution I found is not really beautiful. I duplicated the color section and made it visible only for small screens.

Can you describe me the way to get on my goal, it is not because I don’t trust but I want to understand this and learn what I have to do.

January 16, 2024 at 5:36 pm #1430738
Mike
Moderator
Hi,
I believe the issue is that the css you tried didn’t account for the parallax option you are using, so try removing the second color section of mobile and allow the first section to show on mobile and then try this css:
```
@media only screen and (max-width: 767px) { 
#av_section_1.avia-section .av-parallax .av-parallax-inner {
    background-repeat: no-repeat;
    background-image: url(https://hauptwerk-zt.at/wp-content/uploads/2024/01/rendering1_smartp.jpg);
    background-position: 0% 50%;
}
}
```
This should work, but I recommend adding a custom ID to the first section like: section-mobile-bg then adjust your css.
If you still have trouble please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike
January 16, 2024 at 6:06 pm #1430744
josikrop1
Participant
Thank you! That works perfect now. I added a unique developer ID to this color section as you said and I added the admin login data.
My CSS is not in a child theme. It’s currently in the Quick CSS Box.
- This reply was modified 10 months, 2 weeks ago by josikrop1. Reason: delted website data
January 16, 2024 at 6:14 pm #1430747
josikrop1
Participant
Ok now I understand why the unique ID is so important, now he’s changing the picture from all sites. Got it.
So this should be the solution right?
```
@media only screen and (max-width: 767px) { 
#av_section_1.avia-section .av-parallax .av-parallax-inner section-mobile-bg {
    background-repeat: no-repeat;
    background-image: url(https://hauptwerk-zt.at/wp-content/uploads/2024/01/rendering1_smartp.jpg);
    background-position: 0% 50%;
}
}
```
January 16, 2024 at 6:50 pm #1430752
josikrop1
Participant
Now I changed from stretch to scale (that I can see the whole picture) and it doesn’t change the image again and I don’t understand.
Can you give me a hint what to change that it works again?
- This reply was modified 10 months, 2 weeks ago by josikrop1.
January 17, 2024 at 5:31 pm #1431294
Mike
Moderator
Hi,
Thanks for the login, and I’m glad this this helped you, although I would recommend using a custom ID so that the css only changes the image in the element that you wish and not in other elements in your site. If you add the custom ID: section-mobile-bg then your new css would be:
```
@media only screen and (max-width: 767px) { 
#section-mobile-bg.avia-section .av-parallax .av-parallax-inner {
    background-repeat: no-repeat;
    background-image: url(https://hauptwerk-zt.at/wp-content/uploads/2024/01/rendering1_smartp.jpg);
    background-position: 0% 50%;
}
}
```
As for your last question about stretch to scale, you didn’t say if you wanted this for the desktop or mobile, the element settings will only work for the desktop because you are using css to replace the image on mobile, so for mobile you would need to add a css rule.
But when I check it doesn’t look like it is needed for desktop or mobile because in both cases the whole image is shown.
Perhaps a screenshot of what you are seeing and further explanation would help

Best regards,
Mike
January 17, 2024 at 6:30 pm #1431301
josikrop1
Participant
I would like to change pictures if people use smartphones or tablets. It works now but I would like to change every picture. I want Startseite to show a smartphone version of the pic from Startseite which works pretty good now, but now also “Kontakt”is showing the same picture as “Startseite”. I would like that “Kontakt” is using another picture but I don’t get it how to define the unique user ID correctly.

https://img.savvyify.com/image/9RsR3
https://img.savvyify.com/image/9Rl8A
https://img.savvyify.com/image/Screenshot-iPhone.9RFXL

edit:
Now it works as it should be. Thank you all for your help!
- This reply was modified 10 months, 2 weeks ago by josikrop1.
January 18, 2024 at 9:51 am #1431345
Ismael
Moderator
Hi,

Thank you for the update.

You can use this css code to adjust the contact page’s parallax background on mobile view.
```
@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .avia-section.av-lrfgstj8-d90cf1bdec885f1188a897a4eb2d5556 .av-parallax .av-parallax-inner {
    background-repeat: no-repeat;
    background-image: url(https://images.pexels.com/photos/719396/pexels-photo-719396.jpeg);
    background-position: 100% 50%;
    background-attachment: scroll;
  }
}
```
To adjust the parallax background in your home page, include this code in the css media query above.
```
.avia-section.av-lrf9exbr-b8fbcc7cb10afbd7f5f66906d01bd637 .av-parallax .av-parallax-inner {
    background-repeat: no-repeat;
    background-image: url(https://hauptwerk-zt.at/wp-content/uploads/2024/01/IMG_0759.png);
    background-position: 50% 0%;
    background-attachment: scroll;
}
```
Best regards,
Ismael
January 18, 2024 at 10:22 am #1431356

josikrop1
Participant

Thank you Ismael!

January 18, 2024 at 10:45 am #1431365

Ismael
Moderator

Hi,

You’re quite welcome! Please do not hesitate to open another thread if you have more questions about the theme.

Have a nice day.

Best regards,
Ismael
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Color Section Background Image Responsive Design’ is closed to new replies.