Jump to content

Button on Overlap Image Needs to be Centered for Mobile

Recommended Posts

  • Replies 21
  • Views 762
  • Created
  • Last Reply
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.