I also noticed what ever I increase the height to for that strip above the header is about the same amount that is taken from the top of the slide show.
I have changed it back to standard til I can make it work properly
So any ideas Guys

Hi Floaka Editor
That didn’t work. The Special CSS I have for http://www.autostop.com.au is

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.avia-layerslider {
display: none !important;
}
}

#header_meta {
height: 50px;
}

.phone-info {
width: 500px;
}

.phone-info {
font-size: 18px;
}

What have I done wrong?
Any help is appreciated, thanks Mate

You made my day partially! :-) The CSS field is here now, but if I put in the ‘hide-mobile’, it’s still showing on my mobile :-(

I even tried the css on this page:
http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

And put in only-desktop instead, but both don’t work :-S

Follow up: I did find a way to do this, but think it may not be the most elegant solution. If there is a simpler/better way, please let me know.

I added this to custom css and it worked.

/* #Mobile (Portrait)
================================================== */

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

.responsive .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ }
.responsive #top { overflow-x: hidden; }
.responsive .boxed#top, .responsive #top.boxed .stretch_full ,
.responsive.html_boxed.html_header_sticky #header,
.responsive.html_boxed.html_header_transparency div #header{ width: 100%; max-width: 100%; }
.responsive #top .flex_column_table_cell{display: block;}
.responsive #top .flex_column_table{display:block;}

.responsive #top #wrap_all .container {
width: 85%;
max-width: 85%;
margin: 0 auto;
padding-left:0;
padding-right:0;
float:none;
}
.responsive .units, .responsive .unit {
margin: 0;
}

.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
margin: 0;
margin-bottom: 20px;
width: 100%;
}

.responsive #top #wrap_all .av-flex-cells .no_margin{
display: block;
margin: 0;
height:auto !important;
overflow: hidden;
padding-left:8% !important;
padding-right:8% !important;
}

.responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner{
width: 100%;
max-width: 100%;
margin: 0 auto;
}

.responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding{
padding-left:0% !important;
padding-right:0% !important;
}

.responsive #top #wrap_all .flex_column:empty{margin:0;}
}

Thanks Rikard.

There’s a screenshot of the slider in private content. But I think you’re on track with what I was trying to do….

1) Blog category (“Facility Rentals”) – would like to hide so it doesn’t display.
2) Slide Entry Titles (room names) – would like to change the font color to white, add 10px padding to top, and give the area a minimum height of 60px, to keep height consistent for titles that use 1 or 2 lines.

The CSS you sent looks good, but I don’t see any change after adding it to my child theme. Is there something else I could try?

Thanks again

Hello there, I know you must be busy, but please can you help. This problem has been going on since 22nd November 2015.

As you can see from the website, it’s still a complete mess. I will try and clarify, perhaps my query was confusing.

1. The Home page has the word “Home” in the top left hand corner as well as a horizontal white bar which takes up a lot of the screen when it hadn’t before.

2. The rest of the pages/links, the title and breadcrumbs are transparent when they shouldn’t be. Not until you scroll the page down should it go transparent.

Please can you help. I don’t know what else to do and have tried everything.

Kind regards

hi Vinay,

Thank you,

I have changed the position of the background image to top centre, but nothing changed on mobile version of site.

I checked login details below, they are work fine

Hi Yigit, I enabled the custom css via functions.php, and I applied a custom css tag to the image I’m trying to hide (desktop-only). Then I added the following code to the Quick CSS:

@media only screen and (max-width: 990px) {
.desktop-only { display: none !important; }}

However, it’s still not hiding the image on mobile. Any idea why?