Site URL: https://www.laztheplantscientist.com/

hi @tuanphan

I have a background image with flowers as a border/frame. Its visible on my computer, with a relatively large screen ,but it disappears on smaller screens and mobile. Whats the best way to keep it visible for most platforms as possible without interfering with the type? 

Pete

tuanphan

Add to Design > Custom CSS

/* Healing page mobile */
@media screen and (max-width:767px) {
[data-section-id="600237a6e40b7c3f2cd7e54a"] .section-background img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}
}

Thats great that works on that page! 

What do I edit on the code so it applied accross site? @tuanphan

On 5/7/2021 at 9:56 PM, Peter550 said:

Thats great that works on that page! 

What do I edit on the code so it applied accross site? @tuanphan

remove this line 

Quote

[data-section-id="600237a6e40b7c3f2cd7e54a"]

unfortunately this messed up the rest of the site (see screenshots) 

Any idea how to fix this @tuanphan? 

7 hours ago, Peter550 said:

unfortunately this messed up the rest of the site (see screenshots) 

 

Any idea how to fix this @tuanphan? 

Which code did you add after remove above id?

I added the following code: 

/* Healing page mobile */
@media screen and (max-width:767px) {
[data-section-id="600237a6e40b7c3f2cd7e54a"] .section-background img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}
}

15 hours ago, Peter550 said:

I added the following code: 

 

/* Healing page mobile */
@media screen and (max-width:767px) {
[data-section-id="600237a6e40b7c3f2cd7e54a"] .section-background img {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}
}

It looks like you solved?