How can i shorten the space between my two image banners? (Im using the Ride Theme)

[HarunP_]

[Gabe · Accepted solution]

Hey @HarunP_ 

Thanks for the details and you have reached the German community here but we can chat in English too, that's no problemo! 😉

Have you tried a right-click on the padding -> Inspect Tool -> and use the Chrome developer console to pinpoint the exact CSS class and try using the CSS editor in your Ride theme editor to reduce the gap?

The padding-top of the section in my test-ride theme is controlled by the .section-template--14659249995873__image-with-text-padding CSS class. If you wish to reduce the top padding, you would need to modify this class in the <style></style> tag or the CSS file:

An example code to adjust the padding would be the following:

<style data-shopify="">
 .section-template--14659249995873__image-with-text-padding {
   padding-top: 20px; /* Adjust this value as per your requirement */
   padding-bottom: 0px;
 }

 @media screen and (min-width: 750px) {
   .section-template--14659249995873__image-with-text-padding {
     padding-top: 30px; /* Adjust this value as per your requirement */
     padding-bottom: 0px;
   }
 }
</style>

I strongly recommend you contact one of our experts. This adjustment might be doable by our theme team as part of your 60-min Design Time, but they may also say it is outside our scope of support.

N.B.: Adjusting your theme code can also increase page loading speeds as well as exclude your theme from the theme updates.

Hope that helps! 😉

[HarunP_]

Vielen dank für die ausführliche Erklärung! Leider bin ich nicht der beste im Coden von daher hoffe ich Hilfe von einem bekannten zu kriegen um diesen in den Code zu implementieren. 

[Gabe]

@HarunP_ 

Hoffe ihr werdet das zusammen schaffen! 😉