Spacing between images and button section

Solved

Spacing between images and button section

GabrielNoba
Shopify Partner
18 0 1

Hello there.

 

https://nobaanimal.myshopify.com/

Password: aopahy

 

On my website I had help to arrange te text and button section on the mobile version so it would go under the image.

 

The code is great but it seem to have a bit too much of a space on top. I've tried to play a bit with the code but didn't amount to much unfortunatly. Is there a way for each of these section to have a "normal" amount of spacing.

If i change the images later those will be in the same format too!

 

Capture d’écran, le 2024-07-09 à 09.52.20.pngCapture d’écran, le 2024-07-09 à 09.52.37.pngCapture d’écran, le 2024-07-09 à 09.53.10.png

 

Thanks or your help again ! 

Accepted Solutions (5)

BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

- Here is the solution for you @GabrielNoba 
- Please follow these steps:

step.png

- Then find the theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.content-over-media {
         padding-bottom: 25vh !important;
}

 

- You can reduce "25vh" to a smaller number if you want a smaller distance and vice versa.

- Here is the result you will achieve:

BSSTekLabs_0-1720534527434.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

@media only screen and (max-width: ̃̀750px) {
  .content-over-media {
         padding-bottom: 21vh !important;
 }
}

can you try it @GabrielNoba 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

Hi @GabrielNoba,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the theme.css (or base.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

 

@media only screen and (max-width: 699px) {
    #block-slide-1 .prose {
        position: relative;
        top: -50px;
    }
    
    image-banner .prose {
        position: relative;
        top: -50px;
    }
}

 

Here is the result

BSSTekLabs_0-1720535112198.pngBSSTekLabs_1-1720535134076.png

BSSTekLabs_2-1720535151350.png

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

BSSTekLabs_0-1720539161498.png

can you try to change line 10048 22vh to 18vh

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

@media only screen and (max-width: 749px) {
#shopify-section-template--16421253939311__image-with-text-overlay .content-over-media {
 padding-bottom: 28vh !important;
}
}

This code is for editing the 3rd section specifically. You can shorten the distance and use this code to make the 3rd section wider.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 7 (7)

BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

- Here is the solution for you @GabrielNoba 
- Please follow these steps:

step.png

- Then find the theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.content-over-media {
         padding-bottom: 25vh !important;
}

 

- You can reduce "25vh" to a smaller number if you want a smaller distance and vice versa.

- Here is the result you will achieve:

BSSTekLabs_0-1720534527434.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
GabrielNoba
Shopify Partner
18 0 1

Capture d’écran, le 2024-07-09 à 10.19.24.png

 

Maybe I copied it wrong but the desktop version is now looking like this ?

It doesn't seem to change the mobile version too 

 

Capture d’écran, le 2024-07-09 à 10.21.44.png

BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

@media only screen and (max-width: ̃̀750px) {
  .content-over-media {
         padding-bottom: 21vh !important;
 }
}

can you try it @GabrielNoba 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

BSSTekLabs_0-1720539161498.png

can you try to change line 10048 22vh to 18vh

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

@media only screen and (max-width: 749px) {
#shopify-section-template--16421253939311__image-with-text-overlay .content-over-media {
 padding-bottom: 28vh !important;
}
}

This code is for editing the 3rd section specifically. You can shorten the distance and use this code to make the 3rd section wider.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSS-TekLabs
Shopify Partner
546 156 184

This is an accepted solution.

Hi @GabrielNoba,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the theme.css (or base.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

 

@media only screen and (max-width: 699px) {
    #block-slide-1 .prose {
        position: relative;
        top: -50px;
    }
    
    image-banner .prose {
        position: relative;
        top: -50px;
    }
}

 

Here is the result

BSSTekLabs_0-1720535112198.pngBSSTekLabs_1-1720535134076.png

BSSTekLabs_2-1720535151350.png

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
GabrielNoba
Shopify Partner
18 0 1

Hello again ! 

This seems to fix the problem on the desktop version.

 

Is it possible that the code the first person provided me for the theme.css could conflict with yours?

Cause it does not look like your example 

Capture d’écran, le 2024-07-09 à 10.29.59.png