Jump to content

Gallery Sizing

Recommended Posts

  • Replies 15
  • Views 636
  • Created
  • Last Reply

Top Posters In This Topic

18 hours ago, Homeward said:

Thanks for the response was able to figure it out. Now I am just trying to figure out. How to 

1. Make the phone number link underneath the call to action click to call

2. How to get phone number to show up in mobile menu

 

Thanks

You mean

#1. Make phone number clickable?

#2. Show up next to burger or inside burger menu?

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

#1 Right now I have used CSS to get the phone number to show up under the header button (see homepage image). I want to be able to have that phone number be clickable.

#2 Inside the burger menu (see burger menu image)

(I went ahead and added the phone link to the header. I guess the best thing to do is to have it display none on desktop and tablet in order to get it to show in the burger menu only?)

Thanks

 

image.jpeg

image.jpeg

Edited by Homeward
Link to comment
19 hours ago, Homeward said:

#1 Right now I have used CSS to get the phone number to show up under the header button (see homepage image). I want to be able to have that phone number be clickable.

#2 Inside the burger menu (see burger menu image)

(I went ahead and added the phone link to the header. I guess the best thing to do is to have it display none on desktop and tablet in order to get it to show in the burger menu only?)

Thanks

 

image.jpeg

image.jpeg

Hi,

This is not possible with :after. :after attribute doesn't support click behavior.

First, remove this code

.header-actions .header-actions-action--cta::after {
    content: "☎ 916.823.6467" !important;
    display: block;
    font-size: 1.4rem;
    color: #black;
    font-family: LTC Bodoni 175;
    padding-top: 10px;
    text-align: center !important;
}

Next, Add this code to Last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('<a href="tel:916.823.6467" class="tp-phone">☎ 916.823.6467</a>').insertAfter('header#header a.btn');
	});
</script>
<style>
  div.header-actions-action.header-actions-action--cta {
    flex-direction: column !important;
    display: flex;
}
a.tp-phone {
    display: block;
    font-size: 1.4rem;
    font-family: 'ltc-bodoni-175';
    padding-top: 10px;
    text-align: center !important;
}
  @media screen and (max-width:991px) {
  .header-menu-cta {
    flex-direction: column-reverse !important;
    display: flex;
}
    a.tp-phone {
    color: white !important;
    padding-top: 10px !important;
    padding-bottom: 10px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
  }
</style>

text3.thumb.png.c6320a72df72efec32d7ac212d77aba1.png

text2.thumb.png.c9f8692dc51aa3cc86b38e24afc60676.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

Is there a way to implement the CSS below so that the phone number will change from black to white depending on if the website is being viewed from dark mode and light mode? See attached image for location I am talking about.

 

.darkmode-dark .header-actions .header-actions-action--cta::after{

   color:white !important;

}

Thanks

image.thumb.jpeg.8177f6531621faddc889e9ea984761db.jpeg

Edited by Homeward
Link to comment
17 hours ago, Homeward said:

Is there a way to implement the CSS below so that the phone number will change from black to white depending on if the website is being viewed from dark mode and light mode? See attached image for location I am talking about.

 

.darkmode-dark .header-actions .header-actions-action--cta::after{

   color:white !important;

}

Thanks

image.thumb.jpeg.8177f6531621faddc889e9ea984761db.jpeg

Hi. Which page in screenshot? We can check easier

Or add this code to Page Header (page where you have problem)

<style>
  a.tp-phone {color: white !important;}
</style>

 

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

It’s the dark mode version of the homepage. You can get to the page by clicking on the dark mode button in the lower left corner of the screen. See attached image for the dark mode button. Basically its the same home page but the colors change depending on user preference of light or dark. 

 

image.jpeg

Link to comment
4 minutes ago, Homeward said:

It’s the dark mode version of the homepage. You can get to the page by clicking on the dark mode button in the lower left corner of the screen. See attached image for the dark mode button. Basically its the same home page but the colors change depending on user preference of light or dark. 

 

image.jpeg

Add to Design > Custom CSS

/* Dark mode - phone */
div#darkmodetoggle + #siteWrapper .tp-phone {
    color: white !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
1 hour ago, tuanphan said:

Add to Design > Custom CSS

/* Dark mode - phone */
div#darkmodetoggle + #siteWrapper .tp-phone {
    color: white !important;
}

 

Remove this & use this new code

header#header.dark .tp-phone {
    color: #fff !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

Create an account or sign in to comment

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

×
×
  • 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.