Gallery Sizing

Site URL: https://www.homewardrestoration.com/

Hi,

The gallery shows up great on my home page on mobile. But when viewed on 1080p and up it looks way to big. Does anyone know a good code to adjust just this sizing of the gallery on non-mobile devices?

Thanks

Your site has a password.   We would need the password to view your site.

Sorry the password is 15367. Thanks

On 6/11/2022 at 9:00 PM, Homeward said:

Sorry the password is 15367. Thanks

Which gallery are you referring to? Can you take a screenshot?

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

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?

#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

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

 

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>

It works perfectly! Thank you so much for all the help!

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

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

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>

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. 

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. 

 

Add to Design > Custom CSS

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

The css succeeded in making it white but now when its light themed it stays white too so you can’t see the number. 

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

Thanks so much for the help. It all is working great now!