How can I center buttons on images in Palo Alto Theme?

Store Design
, ,
1

menu.png
menu.png1322×779 257 KB

Hello,

On “menu” page, I’d like each button to be place in the center of the images.

How can I adjust button location on desktop and mobile version both?

Thank you for your assistance in advance.

https://www.yook92.com (password: 692)

2

Hello @YK92

You can try to add the below code to place buttons in the center of the images:

  1. Go to Online Store → Theme → Edit code https://prnt.sc/fJOF9RnL7Rp5

  2. Open your theme.liquid theme file.

  3. Paste the below code before https://prnt.sc/t8BqIJZ2eLzK

I hope my solution can work and support for you.

Kind & Best regards,
GemPages Support Team

3

@YK92

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.column__item__inner {
  position: relative;
}
.column__item__content.aos-init.aos-animate {
  position: absolute;
  top: 47%;
  left: 30%;
}
4

Hi @YK92

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.css

#SectionColumns--template--18023087571230__972f124a-4c45-4a44-90d3-e3a2fbbcffb7 .column__item__content{
      position: absolute !important;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      padding: 0 20px;
}
#SectionColumns--template--18023087571230__972f124a-4c45-4a44-90d3-e3a2fbbcffb7 .column__item__inner{
      position: relative !important;
}
#SectionColumns--template--18023087571230__972f124a-4c45-4a44-90d3-e3a2fbbcffb7 .column__item__button{
      background-color: rgba(255,255,255,0.8); 
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly