Move button hight

Move button hight

NikosBat
Navigator
484 1 107

Hello friends, how can I adjust the button hight in this section, as you see in the image I want my button to be below the images.

 

Bildschirmfoto 2024-12-30 um 20.19.54.png

Replies 4 (4)

Mateen_Asghar
Shopify Partner
43 1 7

Hi @NikosBat,

Can you please share the store URL? so I can provide a more tailored solution for this and on how to center the Title and minimize width space.

Mateen Asghar | Shopify Expert & Partner
Optimizing Shopify Plus stores with 10+ years of web development expertise.
Got your answer? Mark it as an Accepted Solution to help others.
 Reach me at: mateen@100xelevate.com | Visit: 100xelevate.com for quick quotes and expert support.
NikosBat
Navigator
484 1 107

Hello Mateen_Asghar, here is the url and password :  nistore.de, nikthe

hasbi_expatify
Shopify Partner
18 0 1

"Hey Nikos,

To achieve that, you'll need some custom coding. You can:

  1. Edit code in your theme:

    • Navigate to the "sections" folder.
    • Locate the section used in that area (e.g., "banner").
    • Find the HTML div containing the image class (e.g., "image").
  2. Add custom CSS within that div:

    • You can use ChatGPT to help you craft the specific CSS rules.
    • Apply styles similar to those in my photo. (position: absolute , top : 75% , etc)
  3. Implement mobile responsiveness:

    • Use CSS media queries to adjust the image size percentages for smaller screen sizes (e.g., for mobile devices)."

hasbiexpatify_1-1735610700245.png

 



hasbiexpatify_0-1735610630972.png

 

If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 
Website: Expatify Indonesia
Email: hasbi@expatify.co.id

DaisyVo
Shopify Partner
4469 501 598

Hi @NikosBat ,

 

You can follow the steps here:

 

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

 

Here is the code for step 3:

@media screen and (min-width: 1024px){
div#Banner-template--22328067621196__image_banner_FdgqPH {
    flex-direction: column !important;
}
div#Banner-template--22328067621196__image_banner_FdgqPH::before {
    display: none !important;
}
div#Banner-template--22328067621196__image_banner_FdgqPH .banner__media.media {
    position: relative !important;
}
}

Here is the result:

DaisyVo_0-1735617220130.png

 

Please let me know if it works!

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution