Break points

Hello again
I could really use some help here – the more I fiddle the worse it gets.
Perhaps I can ask to try and fix one thing.
I have a color section with an image and custom class you gave me of .mobile-only
This has the following CSS you gave me:
/*—————————————-
// CSS
// Toggle view
//————————————–*/

/* Desktop */

.mobile-only{
display: none;
}
.desktop-only{
display: block;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.mobile-only{
display: block!important;
}
.desktop-only{
display: none!important;
}}
——————————————————-
This does not stop it appearing on desktop view above 1024.
Can you help me fix that?

I can’t see how to send attachments so I will describe.
On the homepage at http://www.solid-steelband.com/wordpress there is a layer slider below which is an image placed in a color section with custom class which is supposed to hide it above 1024px but it doesn’t.
Also, the burger menu does not show up on iPad landscape – it does on portrait. So I have no menu at all on iPad landscape.
The full CSS is descrived below.
(how do I send attachments?)
—————————————————–
CSS in General Styling:
——————————————————
#top #header_meta .phone-info {font-size:16px; color:black;}
@media only screen and (max-width: 990px) {
.av-main-nav > li > a { padding: 0 5px; }
}
.main_menu ul:first-child > li > a { font-size: 15px; }
#top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a:hover .avia-menu-text{
color: #c3512f !important;
}
.avia-menu-fx {
bottom: 10px;
}

@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}

—————————————
CSS in child theme styles.css:
——————————————–
@media only screen and (min-width: 768px) and (max-width: 1024px){
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special,
.html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
display: block;
}
}
/*—————————————-
// CSS
// Toggle view
//————————————–*/

/* Desktop */

.mobile-only{
display: none;
}
.desktop-only{
display: block;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.mobile-only{
display: block!important;
}
.desktop-only{
display: none!important;
}}

Hi Victoria
That solved that! It was Vinay who gave me that code in the first reply in this thread. I saw it was a class when the theme mentioned an ID. Oh well, should have tried that before. Thank you.
I have one last issue – the code above which makes the burger menu display on the iPad at 1024px or below – it works perfectly with portrait mode but in landscape the burger is on the left on top of the logo which is why I thought it wasn’t there – but now I see it overlapping the logo. How will I restore it to the right side?

Thanks Victoria – that’s done it!
One last question – I tried following up on a couple of posts about replacing the ‘burger’ with an image of the word ‘Menu’ which was a request from the client. I didn’t manage to make that work either – is this something that should be simple to do?
Thanks again everyone for helping me.

Thanks Vinay – that certainly works. I have emailed the client to be sure they are happy – I know I am!