Button on Overlap Image Needs to be Centered for Mobile

Hello! I am trying to center all of the buttons on my overlap image cards on mobile.  I can't seem to find the coding snippet for this particular image design anywhere.  Please help me if you can!

With thanks,

Lindsay

Hi. Can you share link to page in screenshot? We can help easier

Hi- it's currently password protected while I'm working on it.  

Site is: https://labellenewsite.squarespace.com/

Password: labelle14

Thanks so very much!

3 hours ago, LindsayMcconnell said:

Hi- it's currently password protected while I'm working on it.  

Site is: https://labellenewsite.squarespace.com/

Password: labelle14

 

Thanks so very much!

Hi. Where is button in screenshot? I don't see it on homepage

Hi Tuanphan-

My apologies, this is on the About page of the site. 

Thank you!

Lindsay

Try adding to Design > Custom CSS

/* Mobile cart buttons */
@media screen and (max-width:767px) {
.image-button.sqs-dynamic-text {
    text-align: center;
}
.image-card.sqs-dynamic-text-container {
    margin-left: auto;
    margin-right: auto;
}
}

This worked wonderfully thank you so much! I have one other issue maybe you can help me with?  On mobile, the banner video is much too tall.  I was hoping to get the aspect ratio set so you can see the full width of the image like on desktop.  Are you able to help me here?

Thank you!

Lindsay

20 hours ago, LindsayMcconnell said:

This worked wonderfully thank you so much! I have one other issue maybe you can help me with?  On mobile, the banner video is much too tall.  I was hoping to get the aspect ratio set so you can see the full width of the image like on desktop.  Are you able to help me here?

 

Thank you!

Lindsay

Add to Design > Custom CSS > Save & reload your site. You can adjust number 40.

/* Resize home mobile video */
@media screen and (max-width:767px) {
[data-section-id="6092a7be6be2525e3b30eae9"] iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
[data-section-id="6092a7be6be2525e3b30eae9"] {
    min-height: 40vh !important;
}
}

Also, do you want to fix issue: button overlap nav?

That would be amazing thank you!! I appreciate this help so much.

Hi again-

Do you know if there's anyway to avoid the black bars showing up on the video on mobile?

Thank you!

19 hours ago, LindsayMcconnell said:

Hi again-

Do you know if there's anyway to avoid the black bars showing up on the video on mobile?

Thank you!

 

try adjust number 40 to lower number then save & reload the site

Thank you! You've been so helpful.  Are you able to assist with the code to adjust the button overlap nav?

Thank you!

14 hours ago, LindsayMcconnell said:

Thank you! You've been so helpful.  Are you able to assist with the code to adjust the button overlap nav?

 

Thank you!

You can add a Book Now item in Main Navigation, then we will give the code to turn it to button style. Thus, the overlap won't appear.

Hello-

I updated the nav to include the book now as a link instead of a button.  Please let me know what coding I should use to convert it to a button. 

Thank you again!

Lindsay

On 6/7/2021 at 8:33 PM, LindsayMcconnell said:

Hello-

I updated the nav to include the book now as a link instead of a button.  Please let me know what coding I should use to convert it to a button. 

Thank you again!

Lindsay

Hi. Can you check site url?

Hello-

I had to publish the site- the new URL is labelle-artistry.com.  Thank you!

16 minutes ago, LindsayMcconnell said:

Hello-

I had to publish the site- the new URL is labelle-artistry.com.  Thank you!

 Add to Design > Custom CSS

/* Mobile center text */
@media screen and (max-width:767px) {
/* homepage */
div#block-7bcbdd64481de3c80b1d .image-title-wrapper {
    display: flex;
    justify-content: center;
    text-align: center !important;
    margin: 0 auto;
    width: 100% !important;
}
/* Location page */
div#page-section-6092fa99a94b2351eb1cf917 .image-title {
    text-align: center;
}
}

Thank you! Worked perfectly - truly appreciate your support. 

The only thing I could still use help on is making "BOOK NOW"  on the header a button, and fixing any spacing issues once I do so.  Whenever I've made changes it appears the logo is not centered properly.  Are you able to assist me with this?

Thank you!

Lindsay

On 6/8/2021 at 10:57 PM, LindsayMcconnell said:

The only thing I could still use help on is making "BOOK NOW"  on the header a button, and fixing any spacing issues once I do so.  Whenever I've made changes it appears the logo is not centered properly.  Are you able to assist me with this?

Thank you!

Lindsay

Add to Design > Custom CSS

header#header [href="/book"] {
    background: #084d68;
    color: white;
    padding: 10px;
}
nav.header-nav-list {
    align-items: center;
}

Which spacing? Can you take a screenshot?

I see logo centered here. Can you take a screenshot?

Thanks this works perfectly! One question- my logo seems to be slightly off-center (less padding to the right) and I cannot figure out what I'm doing wrong here.  Any idea?  Should I just upload the logo with a little more padding added to the right? 

Thank you!

17 hours ago, LindsayMcconnell said:

Thanks this works perfectly! One question- my logo seems to be slightly off-center (less padding to the right) and I cannot figure out what I'm doing wrong here.  Any idea?  Should I just upload the logo with a little more padding added to the right? 

 

Thank you!

Find & Adjust this code

.header-nav-item:nth-of-type(4) {
    margin-right: 350px !important;
}