Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How can I change the size of an image in an image block to fullest width?


Recommended Posts

Hello,

I like to change the image size of an image in an image block so there's no frame around the image itself. The other side of the image block should still contain my text + button. Can someone help me and has a css?

I'm using version 7.1.

THANK YOU! Would be amazing if someone could help me here.

Link to comment
  • Replies 20
  • Created
  • Last Reply

Top Posters In This Topic

Hi. Can you share link to page where you insert image? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 4/13/2021 at 4:38 PM, deniselibelle said:

Hi, it's https://www.rustyling.com/ 🙂 I like to have all 3 images in the 3 image blocks as big as the frame, the other side of the image block with text and button should remain the same.

Thank you!

Hi. You mean remove this spacing?

image.thumb.png.64001ead1d871ac94fdc6b8b36b5eac1.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
11 hours ago, deniselibelle said:

Yes exactly! Thank you! 🙂

Add to Design > Custom CSS

/* Visual images */
[data-section-id="60684b9531e2bd009b5b6591"] .content-wrapper {
    padding-left: 0 !important;
}
/* work with me image */
[data-section-id="60684683ed66ba3ee892c7dd"] .content-wrapper {
    padding-right: 0 !important;
}
/* about image */
[data-section-id="60683253c3cea02b2d4fb112"] .content-wrapper {
    padding-left: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
3 hours ago, deniselibelle said:

+ I recognized that in the mobile version the text is then also very close to the mobile frame, so it doesn't look good. Is there any other option?

Remove above code & use this new code

@media screen and (min-width:768px) {
/* Visual images */
[data-section-id="60684b9531e2bd009b5b6591"] .content-wrapper {
    padding-left: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* work with me image */
[data-section-id="60684683ed66ba3ee892c7dd"] .content-wrapper {
    padding-right: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* about image */
[data-section-id="60683253c3cea02b2d4fb112"] .content-wrapper {
    padding-left: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 4/27/2021 at 9:38 PM, deniselibelle said:

 I don't know why but there's still a frame above and below the picture.

Hi. Can you take a screeshot?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 5/5/2021 at 8:04 PM, deniselibelle said:

So now frame above, below and between the images. 

Hi. You want to remove these spacing?

image.thumb.png.3b84d56a85664682f695ad41ed6e58ad.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 5/11/2021 at 6:36 PM, deniselibelle said:

Exactly, like in my example below: 

 455776680_Bildschirmfoto2021-05-05um15_01_57.thumb.png.884c6f1102432de571cc3dc4a38696b6.png

To remove that top/bottom spacing, you need to remove text first...

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
21 hours ago, deniselibelle said:

Do you mean the text above the picture (Natural.Contemporary.Authentic)? Because the text and button next to the picture should remain. 1302565024_Bildschirmfoto2021-05-19um14_52_57.thumb.png.1f06e053426120374326e7c2131a31a4.png

You can't remove top padding without removing red text.

image.thumb.png.d637a7b10e950c0de09e354cd97f1bf5.png

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 5/21/2021 at 5:53 PM, deniselibelle said:

Hey, I deleted the text above 🙂 The space above the pictures is gone now but there's still frame on the side and below the picture. 

Don't remove any code in your current code

First, remove Spacer Block under image, next add this to Design > Custom CSS

body.homepage article section:nth-child(n+2) .content-wrapper {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...