How can I move this button on mobile?

[DaveyAlcatraz]

Hi everyone

I would really love it if someone could help me fix this? The basic issue is the placement of the button itself. This button needs to be moved to sit directly under the paragraph and centred between the last two words "New Zealand". Can someone please let me know how to make this change?

[Sweans · Accepted solution]

Hi @DaveyAlcatraz ,

To move the button, follow these steps:

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find your theme and click on Customize.

4.Click Actions > Edit code.

5.In the left sidebar, under the Layout directory, select skelet.css.

6.Search for the following code:

@media (max-width: 777px) {
    x-flex[ai-s=center] {
        align-items: center;
    }
}

Replace it with the code below, then save your changes:

@media (max-width: 777px) {
    x-flex[ai-s=center] {
        align-items: start;
        padding-left: 35px;
    }
}

7. Next, search for this code:

@media (max-width: 777px) {
    x-flex[pi-s*=between][orientation-s=column] .content x-flex {
        height: 100%;
        justify-content: space-between;
    }
}

Replace it with the following code, then save your changes:

@media (max-width: 777px) {
    x-flex[pi-s*=between][orientation-s=column] .content x-flex {
        height: 58%;
        justify-content: space-between;
    }
}

Result:-

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Sweans · Accepted solution]

Hi @DaveyAlcatraz ,

To move the button, follow these steps:

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find your theme and click on Customize.

4.Click Actions > Edit code.

5.In the left sidebar, under the Layout directory, select skelet.css.

6.Search for the following code:

@media (max-width: 777px) {
    x-flex[ai-s=center] {
        align-items: center;
    }
}

Replace it with the code below, then save your changes:

@media (max-width: 777px) {
    x-flex[ai-s=center] {
        align-items: start;
        padding-left: 35px;
    }
}

7. Next, search for this code:

@media (max-width: 777px) {
    x-flex[pi-s*=between][orientation-s=column] .content x-flex {
        height: 100%;
        justify-content: space-between;
    }
}

Replace it with the following code, then save your changes:

@media (max-width: 777px) {
    x-flex[pi-s*=between][orientation-s=column] .content x-flex {
        height: 58%;
        justify-content: space-between;
    }
}

Result:-

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[DaveyAlcatraz]

Hi Sweans, I apologise I prematurely jumped the gun and accepted this solution. Unfortunately I cannot find the first line of code you are referring to. Can you please advise?

[niraj_patel · Accepted solution]

Hello @DaveyAlcatraz 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   #shopify-section-template--22470854672705__gs_hero_363YbV x-flex[pi-s*=between][orientation-s=column] .content x-flex {
       align-items: flex-start !important;
       height: 63% !important;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[DaveyAlcatraz]

Hi Niraj

Thanks heaps for your response. The button looks really big by comparison is there any way to make it the same width as the words "New Zealand" and positioned directly under them?

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   #shopify-section-template--22470854672705__gs_hero_363YbV x-flex[pi-s*=between][orientation-s=column] .content x-flex {
       height: 59% !important;
   }
   #shopify-section-template--22470854672705__gs_hero_363YbV a.button.is-customized {
       padding: 8px 10px !important;
       font-size: 11px !important;
        margin-left: 11px;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[DaveyAlcatraz]

Thanks Niraj,

for some reason our screens show a different view.. I’m unsure why, could it be to do with my iPhone?

 

[niraj_patel]

Sorry for late reply @DaveyAlcatraz 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
  #shopify-section-template--22470854672705__gs_hero_363YbV x-flex[pi-s*=between][orientation-s=column] .content x-flex {
      align-items: flex-start;
      height: 67% !important; /* you can adjust button by height and*/
      margin-left: 25px; /* by height margin*/
   }
   #shopify-section-template--22470854672705__gs_hero_363YbV a.button.is-customized {
        padding: 8px 10px !important;
       font-size: 11px !important;
   }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.