How to Reduce Extra Space in Banner Image on Shopify?

[Xhehdy]

I’m having trouble with the spacing in my banner image. I have set my text to be on the bottom left of the image, but there’s still a lot of empty space from the start of the banner to where the text appears. How can I reduce or edit this space to make my banner look better? Any tips or guidance would be greatly appreciated!

I’ve attached an image showing the current issue and another image illustrating the desired outcome. Thank you!

Current Issue Image:

Desired Outcome Image:


I want this to be on all devices(Laptop and mobile)

[Made4uo-Ribe]

Hi @Xhehdy

check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.banner__content.banner__content--bottom-left {
    margin-left: 0px;
    padding-bottom: 0px;
}

And save.

result:

[Xhehdy]

Thank you so much for your help! It worked perfectly.

I have another question: How can I reduce the size of my text on the image banner for mobile only? I want the text to appear smaller on mobile devices compared to the laptop view. Any suggestions on how to achieve this?

Thanks again!

[Made4uo-Ribe]

Check this one.

Same Instruction.

I add some comment so youll know which is which.

@media only screen and (max-width: 749px){
/* Title */
.banner__box.content-container.content-container--full-width-mobile h2 {
    font-size: 16px;
}
/* Paragraph */
.banner__text.rte p {
    font-size: 12px;
}
}

And Save.

Result:

[Xhehdy]

Hi @Made4uo-Ribe ,

Worked perfectly well, thanks.

I kinda have another question, no worries this will be the last. Can you please help me align the buttons on the same line?

Here is how the buttons are currently appearing on my page.

Here is how I would like them to appear.

Thanks so much for your help, and sorry for any rough edits!

[Made4uo-Ribe]

No worries, just a clarification. The button alignment apear on the smaller screen like mobile.

It automatically go down, for smaller screen so it wont look like conjested. Do you like to look more squeeze? Like this?

[Xhehdy]

Yes, this is what i want