Can we decrease the gap and move the title to the pink box?

Store Design
1

Screenshot 2023-02-17 at 02.59.01.png
Screenshot 2023-02-17 at 02.59.01.png716×1102 83.5 KB

Can you move the the title to the pink box and end the pink boarder at the bottom of the bottom yellow box. Just decreasing that huge gap.

https://hothugger.com/products/cream-hot-hugger-wearable-hot-water-bottle

2

Hi @Finn4

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 767px){

.image-with-text__media-item.image-with-text__media-item–medium.image-with-text__media-item–middle.grid__item {

height: 260px;

}

div#ImageWithText–template–16716025757952__14b63092-94f3-4b3d-ae71-e3ae13e9d47e {

padding-top: 0 !important;

}}

PageFlyVictor_0-1676604617874.png
PageFlyVictor_0-1676604617874.png374×577 40.2 KB

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

can you make the text a bit lower and the gap at the top the same as the gap at the bottom please

4

@Finn4

You can try again with this code:

@media screen and (max-width: 767px){
.image-with-text__media-item.image-with-text__media-item--medium.image-with-text__media-item--middle.grid__item {
    height: 260px;
}
div#ImageWithText--template--16716025757952__14b63092-94f3-4b3d-ae71-e3ae13e9d47e {
    padding-top: 20px !important;
    padding-bottom: 36px !important;
padding-left: 65px !important;
}}

PageFlyVictor_0-1676605238754.png
PageFlyVictor_0-1676605238754.png355×403 32.1 KB

5

Hello @Finn4

Because your image has too much space, we can’t fix it perfectly. I will help you fix the title part.

GemPages_0-1676606283745.png
GemPages_0-1676606283745.png1560×926 116 KB

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_1-1676606301202.png
GemPages_1-1676606301202.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_2-1676606727573.png
GemPages_2-1676606727573.png1591×891 75.1 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

Hi @Finn4

I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

Please add this css in your bottom of the css file:

@media screen and (max-width: 749px) {

#shopify-section-template–16716025757952__14b63092-94f3-4b3d-ae71-e3ae13e9d47e .image-with-text__text-item .image-with-text__content {padding-top: -0 !important; margin-top: -37px;overflow: inherit;}
}

Regards,

Santanu

7

Great, can you make the text go up a little more , centre align the text and also there is a little white line along the image at the bottom please can you remove. Thank you

8

Hi @Finn4

The text “Portable & Light” already center align. And make the text go up a little more use this code.

Please add this css in your bottom of the css file:

@media screen and (max-width: 749px) {

#shopify-section-template–16716025757952__14b63092-94f3-4b3d-ae71-e3ae13e9d47e .image-with-text__text-item .image-with-text__content {padding-top: -0 !important; margin-top: -41px;overflow: inherit;}
}

Regards,

Santanu

9

Can you please make the text go up a little more , and also there is a little white line along the image at the bottom please can you remove. Thank you