Different behaviour desktop – mobile (and tablet)

Hi, as per subject, on the website venicediving.com more than one thing differs from desktop version.
I write everything in this topic, let me know if I should open a topic for each one.

1) link and link hover color
I wrote on quick CSS but works only on desktop version

#top p a { color: #eb3b3b; }
#top p a:hover { color: yellow; }

how to get the same in mobile and tablet?

2) Breadcrumb on mobile
Even though I put this in quick css

@media only screen and (max-width: 767px){
#top #wrap_all .breadcrumb {
    display: none;
}}

it doesnt work.

3) h2 in mobile – tablet
Even though I put this in quick css

h1, h2, h3, h4, h5, h6 { text-transform: none !important; }

@media only screen and (max-width: 767px) {
  .template-page .entry-content-wrapper h2 {
    text-transform: none!important;
  }}

and the same in advanced styling for h2
it doesnt work.

4) on mobile and tablet, in the page https://www.venicediving.com/padi-diving-instructor-course-italy/
there is a line under the image even though

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #first .container .flex_column{
margin-bottom:0px!important;
}}
.container_wrap { border-top: none !important; }

I’m pretty sure I’m doing something wrong but I cant find the solution.

Thanks in advanced