How to hoover telephone info span in top bar?

Hey Arjan,
I recommend turning the phone & email into links so they will work across all platforms, this will also allow them to easily have a “on hover” effect
Your “hover” css would look like this:

.phone-info a:hover {
color: red !important; 
}

feel free to adjust the color to suit.

Please read this article about formatting your phone number for cross platform devices
Here is how to create email links
Please give this a try & let us know if you need any assistance with it.

Best regards,
Mike

Hi,
Can you please include a admin login in the private content area so we can assist?

Best regards,
Mike

Hi,
Thanks for the login, I followed the steps in the links I posted to create the phone & email links, and then added the css from above & now the phone & email links are black on hover with a underline.
Please clear your browser cache and check.
Please check that the phone number link works for you, as I’m in the US and your phone numbers are formatted different than ours, if you need to adjust please read the article above and correct.

Best regards,
Mike

Hi Arjan,

You can set that under Enfold->Advanced Styling. Select the header or headers of your choice and select None in the Text Transform option.

Best regards,
Rikard

Hi,
Typically we can adjust the elements with css and media queries to make it more responsive. In some cases, as with sliders, it is better to create a second one to show at smaller screen sizes.
I took a look at your site, and believe the columns you are referring to are in the middle of your homepage, is this correct?
Please see the screenshot in Private Content area.
For this section it looks like the titles need to be a smaller font size for the tablet size screens. Are there any other sections that you saw having issues with this screen size?

Best regards,
Mike

Hi,
For the workshop page, please try this css, it targets just the range that looked to be the issue. Instead of making the font smaller, this will brake the longer words which there only seemed to be 3 on the page:

@media only screen and (min-width: 767px) and (max-width: 950px) { 
#top.page-id-3251 #av_section_3 .av_one_fourth {
padding-right: 0px !important; 
padding-left: 0px !important;
overflow-wrap: break-word;
  word-wrap: break-word;
-ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
 -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
}

Another possibly would be to make the 3 with longer words a smaller font, if you added a custom class to these elements.
Please let us know if you like the word brakes, and if you want to try this with the homepage element, or if you want to go with a smaller font.

*I know what you mean :)

Best regards,
Mike

Hi,
When the text is outside the boxes, what is your screen resolution?
Once I cleared my cache, it seemed to work for me around 768px, Please see the screenshot in Private Content area.
Can you please include a screenshot of what you see?
For the homepage, please try this css:

@media only screen and (min-width: 767px) and (max-width: 950px) { 
#top.home #av_section_2 .av_one_fourth {
padding-right: 0px !important; 
padding-left: 0px !important;
overflow-wrap: break-word;
  word-wrap: break-word;
-ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
 -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
}

Please see the screenshot in Private Content area.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike