OK – I fixed this by setting the width of the tooltip in vw units.

div.avia-tooltip.avia-tt.av-tt-xlarge-width.av-tt-pos-right.av-tt-align-centered.av-mobile-fallback-active.av-permanent-tooltip-single.main_color.av-tooltip-shadow.av-tt-hotspot,
div.avia-tooltip.avia-tt.av-tt-xlarge-width.av-tt-pos-left.av-tt-align-centered.av-mobile-fallback-active.av-permanent-tooltip-single.main_color.av-tooltip-shadow.av-tt-hotspot {
width: 26vw;
}

However, the buttons that I used for the “Read More” do not automatically adopt the smooth scroll feature like the hotspot numbers do. I read elsewhere in this forum that this is default behaviour for anchors but for me they don’t work.

I had to use span id’s in the Accordion titles in order to get the anchors linked. If I use the toggle ID number, it makes no difference. Still no smooth scroll.

Any ideas why this is not working?

Thanks,
Wizard247

Can’t see how it would be formatted wrong – this is what I have:

/*custom css Corporate Barista*/

body, p {
font-weight:300!important;
}

.logo {
margin-top: 25px;
margin-bottom:25px;
}

.avia-testimonial-content p {
color:#000;
}

.main_color .avia-slider-testimonials .avia-testimonial-content, .main_color .avia-testimonial-arrow-wrap .avia-arrow {
opacity:0.5;
}

#top #main .avia-section .template-page {
margin-top:10px;
}

.avia-datepicker-div.ui-datepicker {
width:350px;
}

#top #wrap_all .error .text_input, #top #wrap_all .error .text_area, #top #wrap_all .error .select {
border-color: #cc9c00;
}

#top div .av-light-form .input-text, #top div .av-light-form input[type='text'], #top div .av-light-form input[type='input'], #top div .av-light-form input[type='password'], #top div .av-light-form input[type='email'], #top div .av-light-form input[type='number'], #top div .av-light-form input[type='url'], #top div .av-light-form input[type='tel'], #top div .av-light-form input[type='search'], #top div .av-light-form textarea, #top div .av-light-form select, div div .av-light-form .button {
color:#e5e5e5!important;
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
.avia-menu-subtext {
display:none;
}
}

h2.avia-caption-title {
letter-spacing:2px!important;
}

.avia-tooltip .inner_tooltip {
font-size: 13px;
}

#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
font-size:0.7em;
}

.html_header_sidebar #top #header .social_bookmarks li a,
#top #wrap_all .av-social-link-instagram:hover a,
.html_header_sidebar #top #header .social_bookmarks li.social_icon_1 a,
html body [data-av_iconfont='entypo-fontello']:before,
li.social_bookmarks_instagram.av-social-link-instagram.social_icon_1 {
font-size:60px!important;
}

#top .social_bookmarks li a {
min-height:50px!important;
height:50px!important;
}

Yes – after I sent in the support request, I reduced the size of the logo and made it fit – however, I’d still like it to show up in the mobile header as well. Is this possible?

I had BWP Minify and Wordfence switched on – deactivated them now. Emptied caches first. No difference on iPad. Could you please have another look?

Thank you,
Louise

OK – I think I have found the solution. This works for my site – it changes the background images to “scroll” for tablets – landscape positioning:

/* Landscape Tablet*/
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
div.flex_cell.no_margin.av_two_fifth.avia-builder-el-20.el_before_av_cell_three_fifth.avia-builder-el-first.avia-full-contain.av-hide-on-mobile,
div.flex_cell.no_margin.av_two_fifth.avia-builder-el-27.el_before_av_cell_three_fifth.avia-builder-el-first.avia-full-contain.av-hide-on-mobile,
div.flex_cell.no_margin.av_two_fifth.avia-builder-el-34.el_before_av_cell_three_fifth.avia-builder-el-first.avia-full-contain.av-hide-on-mobile {
background-attachment: scroll!important;
background-size: cover!important;
}
}

When you view the Enfold-App demo on iPad, the FIXED background images (1500×1000) that are used in the 2/5-3/5 grids of the mobile phones and when scrolling seemingly run into one another to change the mobile phone screen (great effect) do NOT show up when viewed in Landscape mode on iPad. Only ONE of the images shows – the one with the hand – and the others are not there or are underneath the one that shows – not sure.

I replaced these images with my own and also only one showed up and one other image as well but they showed underneath each other. Very messy. I have removed as site had to be presented to client. The issue however is viewable on your demo site if you have an iPad, so you can see what I mean.

Link below…

After I made the css changes recommended above is when I lost the transitions.

I also tried the media queries for iphone and ipad but the logo does not shrink. I think it may have something to do with that feature being switched off by default?

Louise

That switched off the red borders on the fields that SHOULD have it (name and email), but it stayed on the Select field which SHOULD NOT have it.

Nearly there!

Can I do the same on ipad portrait and landscape view? i.e. the logo resizes to smaller. Currently they stay the same size. I tried the above css code in the media queries but it doesn’t work there.

I also seem to have lost the smooth transitioning of the logo into the smaller size. Any chance of getting that back?

Thank you!
Louise

Thank you that worked for the desktop main view.

Can I get it to shrink when scrolling down the page so it fits back into the header container?

Also – I need it normal on mobile size, but I guess I can adjust that by putting the above in a css media statement.

thanks,
Louise