Banner Image Text Alignment Issue

Ask & Offer
, ,
1

Hi all,

I’m using Shopify for the first time and managed to put together my store with the help of YouTube tutorials. The store URL is theeasyflags.co.uk (password: helloworld). I’m using the Dawn 15.4 theme.

Banner Issue (Mobile)

My hero banner doesn’t support separate images for desktop and mobile, so I added a custom code snippet to image-banner.liquid, which helped with responsiveness. However, on mobile view, the heading and text aren’t appearing where I want them (screenshot attached). “I’ve learned new user is allowed only 1 image, so I removed this to showcase the real issue.”

I’ve kept the banner height setting as “Adapt to first image”, because changing it distorts the desktop layout.

To adjust the text position, I added the following custom code starting at line 62:

liquid
{%- style -%}
/* Desktop (750px+) */
@media screen and (min-width: 750px) {
#Banner-{{ section.id }} .banner__heading,
#Banner-{{ section.id }} .banner__text,
#Banner-{{ section.id }} .banner__buttons {
margin-top: 20px !important;
transform: translateY(60px);
}
}

/* Mobile (below 750px) */
@media screen and (max-width: 749px) {
#Banner-{{ section.id }} .banner__content {
padding-top: 50px !important;
padding-bottom: 0 !important;
}
#Banner-{{ section.id }} .banner__box {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#Banner-{{ section.id }} .banner__heading,
#Banner-{{ section.id }} .banner__text,
#Banner-{{ section.id }} .banner__buttons {
margin-top: 20px !important;
}
#Banner-{{ section.id }} .banner__media img {
object-fit: contain !important;
width: 100% !important;
height: auto !important;
}
}
{%- endstyle -%}

The code moves the text closer to the position I want, but it’s now creating unwanted extra space at the bottom of the banner (see attached). I’ve tried tweaking it a lot—with AI help too—but no luck fixing the issue cleanly.

Image 2
Image 2397×589 197 KB

Product Page Spacing
I’m also struggling to reduce the vertical space between blocks on the product page. I’ve tried inspecting and overriding styles, but nothing seems to take effect. Any guidance here would be massively appreciated too.

I know this is a bit of a long post, but I wanted to provide all the details clearly. I’m not a developer—just trying to DIY my way through this.
Thanks in advance for any help!

3

Hi @shafeen,

Sorry, but I’m not really asking for it. Are you trying to show text again for mobile?
Please add code CSS:

@media screen and (max-width: 749px) {
    #Banner-{{ section.id }} .banner__content {
        align-items: flex-end;
    }
}
4

Hi Shafeen,

You’re going to adjust your mobile styles. What you need is more control over the size of the image itself, and removing the leftover padding that comes from the banner box or container.

Replace your current mobile CSS (@media screen and (max-width: 749px)) with this:
liquid
Copy
Edit
/* Mobile (below 750px) */
@media screen and (max-width: 749px) {
#Banner-{{ section.id }} .banner__content {
padding: 0 !important;
display: flex;
flex-direction: column;
justify-content: center;
}

#Banner-{{ section.id }} .banner__box {
margin: 0 !important;
padding: 0 10px !important;
}

#Banner-{{ section.id }} .banner__heading,
#Banner-{{ section.id }} .banner__text,
#Banner-{{ section.id }} .banner__buttons {
margin: 5px 0 !important;
transform: none !important;
}

#Banner-{{ section.id }} .banner__media img {
object-fit: cover !important;
width: 100% !important;
height: auto !important;
max-height: 450px;
}
}
What this does:
Removes extra padding from all banner boxes

Keeps your text spacing nice and tight

Uses object-fit: cover so your image fills the banner nicely but doesn’t stretch weird

Limits max height so you don’t get that giant bottom white space

Removes transform, which was probably pushing the space

6

No this code pushing it further down.

image 2
image 2359×550 148 KB

7

Hi @shafeen,

Yes, it will display the text down for better visibility. How do you want to display it

8

Thank you for the prompt response. If you observe, the CTA is missing as it gone down into the blue background. The blue space between the image and the heading is the main issue as it was created by the code which I’ve given on my initial question.

my mobile image is 2500 x 2500. Just copying my custom image-banner.liquid in case it helps.

{{ ‘section-image-banner.css’ | asset_url | stylesheet_tag }}

{%- if section.settings.image_height == ‘adapt’ and section.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
{%- if section.settings.mobile_image != blank -%}
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before {
padding-bottom: 100%;
content: ‘’;
display: block;
}
{%- else -%}
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
{%- endif -%}
}

@media screen and (min-width: 750px) {
  #Banner-{{ section.id }}::before,
  #Banner-{{ section.id }} .banner__media::before {
    padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
    content: '';
    display: block;
  }
}

{%- endstyle -%}
{%- endif -%}

{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}

{%- if section.settings.mobile_image != blank -%}
@media screen and (max-width: 749px) {
#Banner-{{ section.id }} .banner__media-desktop {
display: none !important;
}
#Banner-{{ section.id }} .banner__media-mobile {
display: block !important;
}
}

@media screen and (min-width: 750px) {
  #Banner-{{ section.id }} .banner__media-mobile {
    display: none !important;
  }
  #Banner-{{ section.id }} .banner__media-desktop {
    display: block !important;
  }
}

{%- endif -%}
{%- endstyle -%}

{%- style -%}
/* Desktop styles (750px and above) */
@media screen and (min-width: 750px) {
#Banner-{{ section.id }} .banner__heading,
#Banner-{{ section.id }} .banner__text,
#Banner-{{ section.id }} .banner__buttons {
margin-top: 20px !important;
transform: translateY(60px);
}
}

/* Mobile styles (749px and below) */
@media screen and (max-width: 749px) {
#Banner-{{ section.id }} .banner__content {
padding-top: 50px !important;
padding-bottom: 0px !important;
}
#Banner-{{ section.id }} .banner__box {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#Banner-{{ section.id }} .banner__heading,
#Banner-{{ section.id }} .banner__text,
#Banner-{{ section.id }} .banner__buttons {
margin-top: 20px !important;
}

/* Mobile image fix only */
#Banner-{{ section.id }} .banner__media img {
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
 }

}
{%- endstyle -%}

{%- if section.settings.image != blank -%}
{%- liquid assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio if section.settings.image_2 != blank assign image_class = 'banner__media-image-half' endif if section.settings.image_2 != blank and section.settings.stack_images_on_mobile assign sizes = stacked_sizes elsif section.settings.image_2 != blank assign sizes = half_width else assign sizes = full_width endif -%} {{ section.settings.image | image_url: width: 3840 | image_tag: width: section.settings.image.width, height: image_height, class: image_class, sizes: sizes, widths: widths, fetchpriority: fetch_priority }}
{%- elsif section.settings.image_2 == blank -%}
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}

{%- if section.settings.mobile_image != blank -%}


{%- liquid
assign mobile_image_height = section.settings.mobile_image.width | divided_by: section.settings.mobile_image.aspect_ratio
-%}
{{
section.settings.mobile_image
| image_url: width: 1500
| image_tag:
width: section.settings.mobile_image.width,
height: mobile_image_height,
sizes: ‘100vw’,
widths: ‘375, 550, 750, 1100, 1500’,
fetchpriority: fetch_priority
}}

{%- endif -%}

{%- if section.settings.image_2 != blank -%}


{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = ‘banner__media-image-half’
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image_2
| image_url: width: 3840
| image_tag:
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority
}}

{%- endif -%}

{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%}

{{ block.settings.heading }}

{%- when 'text' -%}

{{ block.settings.text }}

{%- when 'buttons' -%}
{%- if block.settings.button_label_1 != blank -%} {{- block.settings.button_label_1 | escape -}} {%- endif -%} {%- if block.settings.button_label_2 != blank -%} {{- block.settings.button_label_2 | escape -}} {%- endif -%}
{%- endcase -%} {%- endfor -%}

{% schema %}
{
“name”: “t:sections.image-banner.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.image-banner.settings.image.label”
},
{
“type”: “image_picker”,
“id”: “image_2”,
“label”: “t:sections.image-banner.settings.image_2.label”
},
{
“type”: “image_picker”,
“id”: “mobile_image”,
“label”: “Mobile Image (1:1 recommended)”,
“info”: “Upload a square image (1:1 aspect ratio) that will be displayed on mobile screens. If not provided, the main image will be used.”
},
{
“type”: “range”,
“id”: “image_overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “t:sections.image-banner.settings.image_overlay_opacity.label”,
“default”: 0
},
{
“type”: “select”,
“id”: “image_height”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.image-banner.settings.image_height.options__1.label”
},
{
“value”: “small”,
“label”: “t:sections.image-banner.settings.image_height.options__2.label”
},
{
“value”: “medium”,
“label”: “t:sections.image-banner.settings.image_height.options__3.label”
},
{
“value”: “large”,
“label”: “t:sections.image-banner.settings.image_height.options__4.label”
}
],
“default”: “medium”,
“label”: “t:sections.image-banner.settings.image_height.label”
},
{
“type”: “select”,
“id”: “image_behavior”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.all.animation.image_behavior.options__1.label”
},
{
“value”: “ambient”,
“label”: “t:sections.all.animation.image_behavior.options__2.label”
},
{
“value”: “fixed”,
“label”: “t:sections.all.animation.image_behavior.options__3.label”
},
{
“value”: “zoom-in”,
“label”: “t:sections.all.animation.image_behavior.options__4.label”
}
],
“default”: “none”,
“label”: “t:sections.all.animation.image_behavior.label”
},
{
“type”: “header”,
“content”: “t:sections.image-banner.settings.content.content”
},
{
“type”: “select”,
“id”: “desktop_content_position”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__1.label”
},
{
“value”: “top-center”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__2.label”
},
{
“value”: “top-right”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__4.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__5.label”
},
{
“value”: “middle-right”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__6.label”
},
{
“value”: “bottom-left”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__7.label”
},
{
“value”: “bottom-center”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__8.label”
},
{
“value”: “bottom-right”,
“label”: “t:sections.image-banner.settings.desktop_content_position.options__9.label”
}
],
“default”: “middle-center”,
“label”: “t:sections.image-banner.settings.desktop_content_position.label”
},
{
“type”: “select”,
“id”: “desktop_content_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image-banner.settings.desktop_content_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.image-banner.settings.desktop_content_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.image-banner.settings.desktop_content_alignment.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.image-banner.settings.desktop_content_alignment.label”
},
{
“type”: “checkbox”,
“id”: “show_text_box”,
“default”: true,
“label”: “t:sections.image-banner.settings.show_text_box.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:sections.image-banner.settings.mobile.content”
},
{
“type”: “checkbox”,
“id”: “stack_images_on_mobile”,
“default”: true,
“label”: “t:sections.image-banner.settings.stack_images_on_mobile.label”
},
{
“type”: “select”,
“id”: “mobile_content_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image-banner.settings.mobile_content_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.image-banner.settings.mobile_content_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.image-banner.settings.mobile_content_alignment.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.image-banner.settings.mobile_content_alignment.label”
},
{
“type”: “checkbox”,
“id”: “show_text_below”,
“default”: true,
“label”: “t:sections.image-banner.settings.show_text_below.label”
}
],
“blocks”: [
{
“type”: “heading”,
“name”: “t:sections.image-banner.blocks.heading.name”,
“limit”: 1,
“settings”: [
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “t:sections.image-banner.blocks.heading.settings.heading.default”,
“label”: “t:sections.image-banner.blocks.heading.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
},
{
“value”: “hxl”,
“label”: “t:sections.all.heading_size.options__4.label”
},
{
“value”: “hxxl”,
“label”: “t:sections.all.heading_size.options__5.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
}
]
},
{
“type”: “text”,
“name”: “t:sections.image-banner.blocks.text.name”,
“limit”: 1,
“settings”: [
{
“type”: “inline_richtext”,
“id”: “text”,
“default”: “t:sections.image-banner.blocks.text.settings.text.default”,
“label”: “t:sections.image-banner.blocks.text.settings.text.label”
},
{
“type”: “select”,
“id”: “text_style”,
“options”: [
{
“value”: “body”,
“label”: “t:sections.image-banner.blocks.text.settings.text_style.options__1.label”
},
{
“value”: “subtitle”,
“label”: “t:sections.image-banner.blocks.text.settings.text_style.options__2.label”
},
{
“value”: “caption-with-letter-spacing”,
“label”: “t:sections.image-banner.blocks.text.settings.text_style.options__3.label”
}
],
“default”: “body”,
“label”: “t:sections.image-banner.blocks.text.settings.text_style.label”
}
]
},
{
“type”: “buttons”,
“name”: “t:sections.image-banner.blocks.buttons.name”,
“limit”: 1,
“settings”: [
{
“type”: “header”,
“content”: “t:sections.image-banner.blocks.buttons.settings.header_1.content”
},
{
“type”: “text”,
“id”: “button_label_1”,
“default”: “t:sections.image-banner.blocks.buttons.settings.button_label_1.default”,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_label_1.label”,
“info”: “t:sections.image-banner.blocks.buttons.settings.button_label_1.info”
},
{
“type”: “url”,
“id”: “button_link_1”,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_link_1.label”
},
{
“type”: “checkbox”,
“id”: “button_style_secondary_1”,
“default”: false,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label”
},
{
“type”: “header”,
“content”: “t:sections.image-banner.blocks.buttons.settings.header_2.content”
},
{
“type”: “text”,
“id”: “button_label_2”,
“default”: “t:sections.image-banner.blocks.buttons.settings.button_label_2.default”,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_label_2.label”,
“info”: “t:sections.image-banner.blocks.buttons.settings.button_label_2.info”
},
{
“type”: “url”,
“id”: “button_link_2”,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_link_2.label”
},
{
“type”: “checkbox”,
“id”: “button_style_secondary_2”,
“default”: false,
“label”: “t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.image-banner.presets.name”,
“blocks”: [
{
“type”: “heading”
},
{
“type”: “text”
},
{
“type”: “buttons”
}
]
}
]
}
{% endschema %}

9

Hi @shafeen,

It’s showing fine now, what are you looking for?

Screenshot
Screenshot744×800 68.4 KB

10

My shopify mobile view and iphone 15 view both the same. CTA is not visible. May I know you attached images view?

To be frank this is driving crazy. Managed to put up this site with 0 shopify technical knowledge. Before I start I thought it’s drag & drop, once started realised a proper site is unimaginable with free drag & drop theme.

11

Hi @shafeen,

You just need to remove ‘align-items: flex-end;’, it will display fine on mobile

12

Yes you are correct. Initially the code was without ‘align-items: flex-end;’. But the initial issue I reported with it was the additional space caused by the code which was used to align the blocks. I’ve given the code above.

The problem is the additional blue space created by it. As you know mobile view we need maximum visibility and the additional space pushing the following segment down. If you see the attached image a blue line on the bottom, the space between the blue line and the edge of the image is the space created by the code.

image 3
image 3414×568 155 KB

I really appreciate your responses.

13

Hi @shafeen,

You have 2 ways to fix it:

padding-bottom: {{ 1 | divided_by: section.settings.mobile_image.aspect_ratio | times: 100 }}%;

#Banner-{{ section.id }} .banner__media img {
  object-fit: cover !important;
  height: 100% !important;
  width: 100% !important;
 }
14

I’m sorry, the first change made no difference in the view. Second change please see attached

image 4
image 4444×485 195 KB

.
:innocent:

15

Hi @shafeen,

Can I send you a collaborator invitation? I will check it in detail and inform you soon

16

HI @namphan,

Sorry for the delayed response. Was digging deep and after so many attempts and with the aid of AI managed to sort it out. See attached.

image 6
image 6418×476 204 KB

Removed the whole code which I used to align the blocks and used the code suggested by AI,
#Banner-{{ section.id }} .banner__content {
position: relative;
top: 50px;
}
It did the trick.
I really appreciate your help on the subject. It took me so many many days to get to this point. You are an asset in this community.

Thank you again.

17

Hi @shafeen,

It’s my pleasure :blush:
If you are new, I recommend you find a companion, it will save you a lot of time and money.
Let me know if you want anything else :blush:

18

Hi,
We will when we start making progress. I believe a lot can be improved.
Leave me a link to your portfolio, when the time comes will try to approach you.
by the way what do you think of the present site?

Thank you

19

Hi @shafeen,

You can find it on my profile.
For store: I feel great, congratulations. For newbie, it’s really surprising, just some small CSS errors, but I think it’s not too important.
Congratulations !!!