trying to add some space between image and text

Solved

trying to add some space between image and text

OriHacohen
New Member
15 0 0

hello,

 

i want to add white blank space between the two section (image - text) - in the red marked square.

OriHacohen_0-1718032133928.png

 

also, im trying to make the two section the same size only on mobile. it looks like that now:

OriHacohen_1-1718032211544.png

im trying to reduce the size of the text box to the exact size of the image box.

the store url is padpal.co.il

 

id appreciate a helping hand on that matter,

 

thank you.

 

 

Accepted Solutions (2)

PageFly-Henry
Shopify Partner
1184 335 283

This is an accepted solution.

Hi @OriHacohen 

This is Henry 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

 

.image-with-text__media-item.image-with-text__media-item--large.image-with-text__media-item--top.grid__item {

    padding-right: 10px;

}

@media (max-width: 767px){

.image-with-text__media-item.image-with-text__media-item--large.image-with-text__media-item--top.grid__item {

    padding-right: 0 !important;

}

div#ImageWithText--template--15385986695273__image_with_text_pJ9yfM {

    padding: 10px 5px !important;

}

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Henry
Shopify Partner
1184 335 283

This is an accepted solution.

@media (max-width: 767px){
.image-with-text__text-item.grid__item {
padding-top: 10px !important;
}}

You can try with this code.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 5 (5)

PageFly-Henry
Shopify Partner
1184 335 283

This is an accepted solution.

Hi @OriHacohen 

This is Henry 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

 

.image-with-text__media-item.image-with-text__media-item--large.image-with-text__media-item--top.grid__item {

    padding-right: 10px;

}

@media (max-width: 767px){

.image-with-text__media-item.image-with-text__media-item--large.image-with-text__media-item--top.grid__item {

    padding-right: 0 !important;

}

div#ImageWithText--template--15385986695273__image_with_text_pJ9yfM {

    padding: 10px 5px !important;

}

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

OriHacohen
New Member
15 0 0

it added the blank space on pc view and made the two boxes the same size, but there is still not blank space in mobile view, can it be done?

OriHacohen_0-1718033216646.png

 

PageFly-Henry
Shopify Partner
1184 335 283

This is an accepted solution.

@media (max-width: 767px){
.image-with-text__text-item.grid__item {
padding-top: 10px !important;
}}

You can try with this code.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

OriHacohen
New Member
15 0 0

worked perfectly. thank you so much!

OriHacohen
New Member
15 0 0

Hey Henry,

 

I added another image with text, ive been trying to use the last code you gave me to add the blank white space, but didnt manage to do it... here how it looks now: 

OriHacohen_0-1721072114729.png

can you help with separating the image from the text? 

 

thank you!