buttons in one row on the first screen of the mobile version

[SvitlanaLogvin]

Please help to rearrange the buttons on the first screen of the mobile version in one line. My Shopify theme is Dawn

I am attaching a photo of how it should look

[shreyhweb]

URL?

[SvitlanaLogvin]

https://logvin-jewelry.myshopify.com/

[NartTok]

To access the Hero section in the customizer, please follow these steps:

1. Open the customizer.
2. Open the Image banner section
3. Scroll down until you reach the custom CSS section.
4. Add the following code below:

@media screen and (max-width: 749px) {
.banner--content-align-mobile-center .banner__buttons--multiple > * {
min-width: unset;
}
banner__buttons.banner__buttons--multiple {
grid-template-columns: 1fr 1fr;
display: grid;
}
}

[SvitlanaLogvin]

unfortunately it didn't help

[Sarrah_Jenni]

1.  Access your Shopify admin panel.
2. From the left-hand menu, click on "Online Store" and then select " Theme."
3. In the Themes section, find and click on the "Customize" button next to the Dawn theme.
4. Once the theme customization page loads, look for the section that corresponds to the first screen of the mobile version, typically labeled "Header" or "Mobile Header."
5. Within that section, locate the buttons you want to rearrange.
6. To rearrange the buttons, you can typically drag and drop them to the desired position. If dragging and dropping is not supported, there might be an option to reorder them using arrows or a numerical input field.
7. After you have rearranged the buttons to your liking, preview the changes to ensure they appear as expected on the first screen of the mobile version.
8. If you are satisfied with the changes, click on the "Save" or "Publish" button to apply the new button arrangement to your live Shopify store.

[made4Uo]

HI @SvitlanaLogvin 

You do the following to make the button layout you want. 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media only screen and (max-width: 750px){
.banner__buttons.banner__buttons--multiple> * {
    min-width: 15ch;
}
}

 Result here:

[PageFly-Lucas]

HI @SvitlanaLogvin 

This is Lucas 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: 749px) {

a.button.button--secondary, a.button.button--primary {

    min-width: 16rem !important;

}

.banner__buttons.banner__buttons--multiple {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap;

    justify-content: center !important;

}}

Hope that my solution works for you.

Best regards,

Lucas | PageFly

[Sarrah_Jenni]

Here is the solution. Thanks