Hi,

The code that I provided to you is affecting the desktop version?

Best regards,
John Torvik

Hi Chris!

Whoops, looks like a parenthesis mistakenly got put in there. Sorry!

Can you try this one instead? (I edited my previous post, too.)

@media only screen and (max-width: 767px) {
   .responsive #top:not(.home) #main {
      padding-top: 80px !important;
   }
   #top:not(.home) #header {padding-top:0px !imporant}
}

Best regards,
Sarah

Hi Leonsz,

In the private box I attached a screen shot of what happens when I add this code to custom.css in the browser

@media only screen and (max-width: 479px) {  

.responsive #top .slideshow_caption h2 {
  font-size: 16px !important;
  }
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption { 
     padding-top: 20px;
}
#top .avia-slideshow-button {  
    margin-top: 10px;  
    width: 44%;
    font-size: 11px;
}
.avia-slideshow-inner,
.avia-slideshow-inner li,
.caption_fullwidth.av-slideshow-caption.caption_center.caption_center_framed.caption_framed,
.avia-slideshow-inner li .avia-slide-wrap,
.avia-slideshow-inner li .avia-slide-wrap img  {
    min-height: 250px; !important;
}
.responsive #top #wrap_all .container {    
    width: 90%;
    max-width: 90%;
    }
 }

Do you mean the whole code is breaking or the last small snippet I gave you? When adjust the code to work only on certain page. Can you specify the page you need this working?

Best regards,
Victoria

Hi,

Ensure that the front page hasn’t another code thats conflicting with the Ismael code because its strange the code works normally in the test page and stop to work in your front page. – Clear your cache is an option to try too.

Best regards,
John Torvik

Hi,

For some reason this jQuery.avia_utilities.isMobile on your instance gives false on mobile, so the code does not work. Well, we can stick to initial function, but then the search will be near login, in the top nav on deskctops as well. Is that ok, or should we try to come up with another solution?

Best regards,
Victoria

Hi Thomas,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

.template-page .entry-content-wrapper h2 {
  text-transform: none;
}
#top .related.products h2, #top .upsells.products h2 {
    font-size: 14px;
}
#top.single-product .price, #top.single-product .price span, 
#top.single-product del, #top.single-product ins {
  font-size: 14px;
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi Stian,

We’ll be able to come up with a solution, when you give us access. Thanks for the screenshots. Also did you notice what screen size that was with content falling out? I am checking now at 778px and 857px, looks good, besides the top image being cut off…

Best regards,
Victoria

Hey thomas6602,

Well, moving the captions down would be a bit tricky, here is an alternative solution, that you might consider. This is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (max-width: 767px) {
  .main_color .container .av-inner-masonry-content, 
  #top .main_color .container .av-masonry-load-more, 
  #top .main_color .container .av-masonry-sort,
   .main_color .container .av-masonry-entry .avia-arrow {
    background-color: rgba(248, 248, 248, 0.6);
  }
  .av-fixed-size .av-masonry-entry .av-inner-masonry-content, 
  .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
    left: 0;
    padding: 10px;
  }
  .main_color .site-background {
        color: #2d2b2b;
  }
  .av-masonry-entry .av-inner-masonry-content {
    padding: 10px;
    font-size: 13px;
  }
}

Let us know what you think.

If you need further assistance please let us know.
Best regards,
Victoria

Hi,

Here is how to add a color value also

#top .sub_menu li li a {
font-size: 16px;
color: #000;
}

and you need to change the color code with the number you need

Best regards,
Basilis