Προβλημα με @media για mobile version

Μια περιοχή για το WordPress, αυτή την δημοφιλή δωρεάν πλατφόρμα για blogging

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

Προβλημα με @media για mobile version

Δημοσίευση από tattooiv » 13 Δεκ 2016 22:27

Καλησπέρα, εχω ενα site που στην αρχικη του σελιδα εχει ενα slide και στις υπολοιπες εχει μια σταθερη εικονα για header. Αυτο που θέλω να κανω ειναι να απενεργοποιησω το slide στην αρχικη για πλατος συσκευης μικροτερο απο width 767px(κινητα, tablet) και να εμφανιζω μια μικρη εικονα.

Το slide καταφερα να το απενεργοποιησω προσθέτωντας τον παρακάτω κωδικα μεσα στο .css αρχείο.


@media screen and (max-width: 767px) {
.flexslider {
display: none;
}
}

ολα καλα μεχρι εδω...
αλλα μετα εβαλα πιο πανω κοντα στο header αυτον τον κωδικα και δεν τρεχει


@media screen and (max-width: 767px) {
#header {
background-image: url(http://mysite.gr/wp-content/uploads/201 ... der770.jpg); background-repeat: no-repeat;
}
}

To header απο μονο του ειναι ετσι..


/* -------------------- A. HEADER STYLES -------------------- */

header {
overflow:hidden;
margin:8px 8px 0px 8px; padding:0px; position:relative; z-index:50;
min-height:300px;
}
header .width-container { position:relative; }
nav { float:right; position:relative; z-index:15; }
header h1 { float:left; margin:0px; padding:0px; line-height:1; font-size:5px;}
header #logo { margin:0px; padding:0px; border:none; }
header #logo img { height: auto; opacity:1 !important; filter:alpha(opacity=100);}
header #logo a:hover img { opacity:1 !important; filter:alpha(opacity=100);}
#text-logo-progression { float:left; margin:0px; padding:0px; line-height:1; }
#text-logo-progression a { color:#ffffff; font-size:18px; }

#header-gradient-pro {
position:absolute;
top:0px;
width:100%;
z-index:25;
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C */
}

θελω να χρεισιμοποιησω @media γιατι οταν προσθεσα κατευθειαν το background-image μεσα στο header και ετρεξε ειχα προβλημα στην εμφανιση. Ολες οι σελιδες για λιγο πριν εμφανισουν την σταθερη εικονα και το slide στην αρχικη σελιδα, εμφανιζαν για millisecond την μικρη εικονα που εβαλα στο header ετσι...

header {
overflow:hidden;
margin:8px 8px 0px 8px; padding:0px; position:relative; z-index:50;
min-height:300px; background-image: url(http://mysite.gr/wp-content/uploads/201 ... der770.jpg);
}

Απάντηση

Επιστροφή στο “WordPress γενικά”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες