Hello Ismael,

I understand the issue. Thanks for trying to help me.
I looked again and tried what you said. The pages loads fine and sometimes I get the text,
but sometimes it still now showing.

Please look at this:

On the moment I can’t see the text I opened the browser and saw this code:

<p class=”ls-l” style=”top: 220.034375px; left: 243.821875px; white-space: nowrap; width: auto; height: auto; font-size: 11.89375px; line-height: 12.637109375px; padding: 0px; border-width: 0px; visibility: hidden;” data-ls=”offsetxin:0;durationin:0;fadein:false;offsetxout:0;durationout:0;fadeout:false;”><span style=”color:#ffffff; line-height:1.6em; text-transform: uppercase; font-size:2.5em; font-family: Adobe Garamond Pro;”>The most finest wines, from a host <br> of destinations, supplied by the experts <br> since 1965. Celebrate success <br> with Klerks Fine Wines </span></p>

This is the code that supose to show the text. You can see the inline CSS is standing on visibility hidden.
When I change this to block; the text shows up just nice… so it hangs on that part of code.
I’m curtain that the page was fully loaded… maybe this will help you to understand what happens?

Greets Jeen

Thanks Yigit. Sorry I’m still being a bit dim. I added the above to my custom css but it didn’t do anything.
http://www.edendesignandinteriors.co.uk/design-portfolio/
You can see the labels on large screens but I have hidden them again on mobiles. I have both queries in my custom css at the moment:

/* hide masonry labels */
@media only screen and (max-device-width: 1024px) {
figcaption.av-inner-masonry-content.site-background {
display: none;
}}

/* masonry smaller labels */
@media only screen and (max-device-width: 1024px) {
.av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
  padding: 1px;
  font-size: 12px;
}}

Hi Andy,

Thanks for your reply.

The font size is not really the issue…

I think we can solve the problem when the content will be displayed under the image (like on smaller devices).

How can I do that?

Thanks & regards,
Monique

Arrh the code:
[av_one_full first][av_image src='[352 show=id]’ attachment='[352 show=id]’ attachment_size=’full’ align=’center’ animation=’pop-up’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’][/av_image][/av_one_full]

Hi Dake, Thanks for the reply. Is it possible to use CSS that will only reduce the font size of the main menu to 12px when the website is being viewed at a smaller width, but still keep it at 15px when it is viewed at a larger width? If so, please advise on what would need to be added to the Quick CSS.

Also, in regards to the line height of the title, it looks great in mobile view, but it is still spaced out when viewed at a size that is in between mobile width and desktop width (please try resizing the browser window and you will see what I mean). Is there something else that needs to be altered to ensure the line height is consistent regardless of the particular width of the page being viewed?

Hi Rikard,
I’m sorry, but I’m confused with your code suggestion. Here’s the CSS code I have in my stylesheet where I use the line-height element exactly with the same (and I see no change with to my issue):
#top #wrap_all .avia_mega_div, #top #wrap_all .avia_mega_div ul {
background-color: #f8f8f8;
border:hidden;
color: #cc6600;
font-size: 12px;
line-height: 1em;
}
#top #wrap_all .av-main-nav ul > li:hover > a {
line-height: 1em;
}
Thanks
Lyse

Hello,

For the countdown I reduced the size a bit a quit the seconds so is OK now.

For the tootips, its not working yet:

1.- This code works only in one box – please see pictures 10 in https://drive.google.com/open?id=0B1pkqICrGgvKflRwckk2ZnR1b29VNEVQbVYwNUlYTlRBUXg2ZlkyLUJqWGN6SmxJRlZXYTg

@media only screen and (min-device-width: 768px) and (max-device-width: 1386px) {
.avia-tooltip.avia-tt.av-tt-xlarge-width.av-tt-pos-right.av-tt-align-top.av-mobile-fallback-active.av-permanent-tooltip-single.transparent_dark.av-tt-hotspot {
padding: 3px !important;
font-size: 10px;
}}

2.- This code works great
.av-tt-xlarge-width {
width: 240px !important;
}

3.- There is a problem of overlapping between sections that I’ve resolved moving to different sections. Pictures 10 and 11.

Thanks
Jorge

Hi Yigit, thank you! So I used only this code:

#menu-item-5672:hover > a {background-image: url(https://aquaquestonline.com/wp-content/uploads/2015/07/bp.png); background-size: contain; background-repeat: no-repeat;background-position: 50% 50%; }
#menu-item-5672:hover > a >.avia-menu-text { opacity: 0; }

(without the upper part that went like this: #menu-item-3436 > a::before {
content: “\e824”;
font-family: entypo-fontello;
opacity: 0;
})

I got the menu word to disappear (see https://aquaquestonline.com/ -> “Backpacks” – this is the menu item I applied the code to). But the icon doesn’t appear for some reason. I think I might be missing some small step?

Thanks for your help!!

Hi Rikard,

I have the following CSS for my mega menu:

#top #wrap_all .avia_mega_div, #top #wrap_all .avia_mega_div ul {
background-color: #f8f8f8;
border:hidden;
color: #cc6600;
font-size: 12px;
line-height: 1em; (I removed the line-height element and nothing changed)
}
I tried adding your CSS code and nothing changed.

Thanks
Lyse