Full Width Images on a block

Site URL: http://brondyhumphrey.com

Hello everyone,

I hope you are doing well?
I am currently trying to make this on the footer of my home page: 

(this is a montage I made on Canva)

But for now it looks like this:

Do you think it is possible to make ? 

I wish you a beautiful day 🙂 

brondyhumphrey.com
password: soleil

1 hour ago, iJizzy1 said:

Site URL: http://brondyhumphrey.com

Hello everyone,

I hope you are doing well?
I am currently trying to make this on the footer of my home page: 

(this is a montage I made on Canva)

But for now it looks like this:

Do you think it is possible to make ? 

I wish you a beautiful day 🙂 

brondyhumphrey.com
password: soleil

 

You can assign the image as background image of the section, we can support to modify it as sided image like design

Hello @bangank36, I just assigned the image as background !
(Will it look nice on mobile as well ?)

20 hours ago, iJizzy1 said:

Hello @bangank36, I just assigned the image as background !
(Will it look nice on mobile as well ?)

Use this CSS

/* Footer split layout */
@media screen and (min-width:768px) {
[data-section-id="6139da96d203ef247abc5142"] .section-background {
    width: 50%;
    margin-right: 50%;
}
[data-section-id="6139da96d203ef247abc5142"] {
    background-color: white;
}
}

In the next time, I recommed using this Split plugin to achieve above layout, you can customize everything easier.

Hello @tuanphan ,

It is not working on mobile. The sentence is on the image. Do you know what is the problem ?

 

On 12/1/2021 at 1:21 AM, iJizzy1 said:

Hello @tuanphan ,

It is not working on mobile. The sentence is on the image. Do you know what is the problem ?

 

Yes. The code run on desktop only. Because the text will be small on mobile. To make code run on all devices, use this code

[data-section-id="6139da96d203ef247abc5142"] .section-background {
    width: 50%;
    margin-right: 50%;
}
[data-section-id="6139da96d203ef247abc5142"] {
    background-color: white;
}

It still doesn't look well on mobile as you can see right here :



 

Is there anything you can do to solve this issue ?

Does it make sense

Try

@media only screen and (max-width: 767px) {
  section[data-section-id="6139da96d203ef247abc5142"] .content-wrapper {
    width: 50%;
    margin-right: 0 !important;
  }

  section[data-section-id="6139da96d203ef247abc5142"] .content-wrapper a {
    font-size: 10px;
  }
}

Let me know how it works

Hello @bangank36, I would prefer to have the picture first and then the text with the white background.

In other words, I would prefer it in vertical and not in horizontal as you just did. Do you know what I mean ? 

Hello @bangank36 and @tuanphan, could you find a solution ? 😇

20 hours ago, iJizzy1 said:

Hello @bangank36 and @tuanphan, could you find a solution ? 😇

 

Have you changed your password? soleil is  not possible at the moment

hello @bangank36, there is no password anymore. 🙂

Hello @bangank36 , have you find a solution yet ?

@iJizzy1 Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="6139da96d203ef247abc5142"] {
&:before {
    content: "";
    display: block;
    background-image: url(https://images.squarespace-cdn.com/content/v1/6139da96d203ef247abc5117/1638185519604-55XFEVKX7XX5WE8T2LCB/fond-ecran-iphone-samsung-gratuit-ciel-nuage.jpg?format=original);
    width: 100%;
    height: 150px;
    background-size: cover;
    background-repeat: no-repeat;
}
img {
    opacity: 0;
}
.content-wrapper {
    background-color: white;
}
& {
    height: 420px !important;
    display: block !important;
}

.section-background {
    background-color: transparent;
}
}
}