Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Button on Overlap Image Needs to be Centered for Mobile


Question

  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

21 answers to this question

Recommended Posts

  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Screen Shot 2021-06-03 at 1.55.17 PM.png

Screen Shot 2021-06-03 at 1.55.22 PM.png

Link to comment
  • 0
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?

image.thumb.png.e190eb49781aed92c91f6c78225395e2.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

 

Screen Shot 2021-06-04 at 2.16.43 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

image.thumb.png.ccb0f6be4cdd3f8a66e779d13659f372.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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!

 

 

Screen Shot 2021-06-10 at 10.18.33 AM.png

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...