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

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

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

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

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

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

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...