-
Posts
-
Hi,
On this page http://test.supersportsuae.com/swimming-lessons-super-sports-academy/swimming-instructor/ I’m trying different configurations to provide instructor coach details to clients.
The one with the 4 icons in a table insists in stacking them vertically when on a small screen, yet there’s still room for them all to be horizontal as evidenced by the first entry with the 3 icons that I’ve created using html & css (still trying to get them to sit on the same line but can’t seem to work it out!)
Is there a way to ensure that the small table of 4 icons does not respond the way it currently does to a small screen?
Thanks
Hey SuperSportsUAE,
Thank you for using Enfold.
Please try the following css code.
@media screen and (max-width: 767px) { tbody td { display: table-cell; text-align: center; } }Best regards,
IsmaelHi,
Please remove browser cache or hard refresh before checking the page again. You’re probably looking on a cached version of the page. If it’s still not working, post the login details in the private field.
Best regards,
IsmaelOK, cleared the browser cache, reactivated the WP cache plugin and deleted back-end cache too. Deleted the CSS code prior to that, and re-pasted it, and refreshed page, plus tried in other browsers.
Thanks
Hi,
Are you referring to the icons under “Teresa Vaghi”? We modified the code. The icons are now aligning properly on mobile view.
Best regards,
IsmaelThanks Ismael, that’s the correct one.
Which code was modified?
When I couldn’t get that to work, I was trying the other way to create a similar set up.
So I can now copy the html from the text tab for the remainder of the instructor data?
Thanks
I’ve just noticed another anomaly in this area.
The tooltip for the instructor’s name on a “normal” page is the width of the button/image and sits below it, with the text on 2 lines. Once the page is reduced to a mobile size the text is now on one line and doesn’t fit the page correctly.
Is it possible to change the mobile view so that it is the same way, or is it to do with the other data now stacked below it?
Also in mobile view there is an issue with the icon tooltips for the left and right columns also being unreadable since they are off the page. I tried switching the text for them to right & left respectively but it doesn’t make enough difference.
Thanks
Hi,
o I can now copy the html from the text tab for the remainder of the instructor data?
1.) Yes, you can use the same html codes.
2.) Adjust the width of the tooltip for mobile view.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .coach_tooltip .coach_tooltiptext { width: 70%; } }Best regards,
IsmaelHi Ismael,
I did this, but changed the setting to suit a tablet instead, and all was working fine.
Then I decided to work on the avia-tooltips with the fontello icons so I used your code as base, but not sure I was able to make any difference.
Next thing, I give the table and id and I’m playing with the CSS to try and make the table a little funkier. Didn’t seem to be able to make a difference there either.
At this point I copied the html from one cell to the next to set up the same settings for another instructor and see if I can get his bio into a tooltip. This didn’t work, and then I realised that although I had the instructors details in the html box, on the live page I was still seeing Teresa’s details. So I deleted the cache and emptied the browser cache both of which made no difference.
So I went in and deleted the table but left the button for Warren, and saved his cell. At this point, I saw that I had a similar issue to previously where all the cells had relocated themselves! Please see page.Thanks
Hi,
The page’s builder layout looks broken and it’s possibly caused by invalid html tags. Please re-create the page from scratch because we won’t be able to help you trace back invalid html tags.
Best regards,
IsmaelThanks Ismael. I’ve got the debug mode running so I was able to copy it over from the live site.
Can you explain/give example of “invalid html tags” so I can try to avoid this in future please? Could this have been me playing with the table html & css and getting it wrong?
Finally, is it possible to do what I’m trying to do with the avia-tooltips/fontello icons using your css code for the other tooltips as a base?
Thank you
Hi,
The layout builder is unfortunately very sensitive to open html markup, it can easily break if tags are not closed properly. For example:
<strong>Bold text closed properly</strong>Also, you should probably stick to html5: https://www.w3schools.com/html/html5_intro.asp
Best regards,
RikardHi,
Did you add the css code that we provided above?
2.) Adjust the width of the tooltip for mobile view.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .coach_tooltip .coach_tooltiptext { width: 70%; } }Best regards,
IsmaelHI Ismael,
Yes, I used that and it works for those styles, but I was trying to adapt it so that I could edit the avia-tooltip attached to the fontello icons. I managed to control the size in normal screen mode, but ti doesn’t appear to make a difference on a small screen. See below, thanks
#top .avia-tooltip,
.avia-tooltip .avia-arrow {
background-color: #2b3796;
position: absolute;
min-width: 120px;
max-width: 225px;
border-radius: 10px;
padding: 2px 0;
}@media only screen and (max-width: 989px) {
/* Add your Mobile Styles here */
.avia-tooltip .avia-arrow {
width: 50%;}
}Hi,
I’m sorry but I’m getting a little bit confuse here. Could you provide a screenshot so that we can understand it better?
Best regards,
IsmaelTwo lots of tool tips – the one from hovering over the instructor name button, and one from hovering over the icons.
“.avia-tooltip .avia-arrow {” are the ones associated with the icons,
“.coach_tooltip .coach_tooltiptext {” are the ones associated with the coach name buttons, that you sent me a CSS snippet for.
I took the CSS snippet you gave me from the latter and tried to adapt it for the former, to make them responsive to screen size as the latter is.
Hi,
Just copy the html code from the text block and adjust the name, email address and phone number. Example.
<div class="coach_tooltip"> <h4 style="text-align: center;"><strong><button class="coach_button">Swim Instructor Warren Buchler</button></strong></h4> <span class="coach_tooltiptext">warren@SuperSportsUAE.com | +2343243243243</span> </div>The html code above is for “Warren Buchler”. You don’t need to change the css.
Best regards,
IsmaelNope, I know how to do that, have done for some time.
My query is about the tool-tips connected to the fontello icons in the table below the coach button.
You gave me a CSS snippet so that the tool-tip for the coach button was properly responsive and allowed me to control it.
What I’m after now is some CSS to control the tool-tips attached to the av_font_icon entypo-fontello since they are not responsive and I can not find a way to control them via CSS or within the html. (See attached)
I tried adapting the CSS you provided for the coach button tool-tip but couldn’t make it work.
Thank you
Hi,
What I’m after now is some CSS to control the tool-tips attached to the av_font_icon entypo-fontello since they are not responsive
Isn’t this why we added the css code above?
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .coach_tooltip .coach_tooltiptext { width: 70%; } }Could you provide a screenshot of the issue? This is what I see on my end.
Best regards,
IsmaelNot talking about that button or that tool-tip as the one with an issue.
Below it is a small table with 4 icons in it. The tool-tips for those icons are the ones I’m having issues with. The code I pasted relates to those.
I’m trying to make those tool-tips responsive, the same way the ones for the coach buttons are responsive.
Hi,
I see. The position of the theme tooltips are calculated dynamically so you can’t adjust it correctly via css. You have to modify the tooltip script. Please hire a freelance developer to modify the js > avia.js > AviaTooltip function according to your requirement.
Best regards,
Ismael
- You must be logged in to reply to this topic.