Center heading text and button in Image Banner, Dawn theme desktop

Store Design
, ,
1

I am struggling to get the Heading text and button to center within an Image Banner, specifically on the desktop view because it seems to work itself out as the screen downsizes to mobile. Can anyone help me resolve this?

Attaching image of what the desktop view looks like and then a second image with the mobile view which is what I want it to look like all the time, no matter the screen size - centered.

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

I don’t really know the answer to any of this! My site is shopbugandbird.com
and it’s the image banner just above the footer that has the funky thing
happening with the type.

4

Thanks for your help. My URL is shopbugandbird.com
and it’s the image banner just above the footer that has the funky thing
happening with the type on desktop view only.

1 Like
5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > index.css / base.css / theme.css and paste this at the bottow of the
@media (min-width:767px){
.et_pb_column {
    float: none;
}
.et_pb_module.et_pb_text.et_pb_text_0.et_pb_text_align_left.et_pb_bg_layout_light {
    text-align: center;
}
.et_pb_column.et_pb_column_1_2.et_pb_column_0.et_pb_css_mix_blend_mode_passthrough {
    margin: 0 auto;
}
.et_pb_module.et_pb_text.et_pb_text_1.et_pb_text_align_left.et_pb_bg_layout_light {
    text-align: center;
}
.et_pb_button_module_wrapper.et_pb_button_0_wrapper.et_pb_button_alignment_left.et_pb_button_alignment_phone_left.et_pb_module {
    text-align: center;
}
}

ZestardTech_0-1686207805616.png
ZestardTech_0-1686207805616.png1789Ă—844 365 KB

6

Hello @egagnard

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
    margin: 0 auto;
}
7

Hi @egagnard ,

This is a mobile view

Screenshot (2).png
Screenshot (2).png399Ă—426 223 KB

goto the base.css file and go below add this CSS,

.et_pb_row.et_pb_row_0 {
display: initial;
}

.et_pb_text_0 h1 {
font-size: 30px;
}

div#et-main-area span {
font-size: 12px;
}

body #page-container .et_pb_section .et_pb_button_0 {
font-size: 10px!important;
}

If it works for you, don’t forget to Like it and Mark it as a Solution

8

Hi there. This top image banner is one I still want justified on the left as it is. It’s the image banner at the very bottom of the landing page, just above the footer that I’m looking to adjust the text on. It’s already perfect on mobile, but on desktop it’s on the left when I want it centered.

9

Hi, thanks. This isn’t the image I was struggling with. The top header photo has the text how I want it.

it’s the bottom image banner above the footer where the text is not centered on desktop view.

10

Hi, thanks. All of these settings are already set to center, yet the heading and button are not centered (talking only about the image banner at the bottom of my landing page, just above the footer that says “little explorers, big adventures”)

11

again, bottom image above the footer only. The top banner has the text how I want it.