freestuff.gr αρχική σελίδα
 FAQFAQ    ΑναζήτησηΑναζήτηση   Λίστα ΜελώνΛίστα Μελών   Ομάδες ΜελώνΟμάδες Μελών   <b>Εγγραφή Μέλους</b>Εγγραφή Μέλους 
 ΠροφίλΠροφίλ   Επιλογές μέλους Επιλογές   Τα bookmarks μου Τα bookmarks μου   Προσωπικά μηνύματαΠροσωπικά μηνύματα 
  διαφήμιση  

Καλώς ήρθατε στο forum μας! Για να συμμετάσχετε στις συζητήσεις θα πρέπει να είσαστε μέλος. Γίνετε μέλος τώρα!.

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


 Forum index » Δημιουργία Web Sites, Γραφικών & Προγραμματισμός » WordPress » WordPress γενικά
Moderators:  PHP Moderators, Super-Moderators, WebDev Moderators
Εισαγωγή νέου Θέματος   Απάντηση στο Θέμα Σελίδα 1 από 1 [1 Μήνυμα]      Bookmarks Tags: mediamobile Mark the topic unread :: Προηγούμενο θέμα :: Επόμενο θέμα
ΑποστολέαςΜήνυμα
tattooiv


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 104


View users profile
ΜήνυμαΣτις: 13 Δεκ 2016 22:27    Θέμα: Προβλημα με @media για mobile version Απάντηση με παράθεση  Mark this post and the followings unread

Καλησπέρα, εχω ενα 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/2016/12/mobile-header770.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/2016/12/mobile-header770.jpg);
}
Εμφάνιση Μηνυμάτων:   
Εισαγωγή νέου Θέματος   Απάντηση στο Θέμα Σελίδα 1 από 1 [1 Μήνυμα] Mark the topic unread :: Προηγούμενο θέμα :: Επόμενο θέμα
 Forum index » Δημιουργία Web Sites, Γραφικών & Προγραμματισμός » WordPress » WordPress γενικά


Σχετικά θέματα
 Θέματα   Απ/σεις   Αποστολέας   Τελευταίο μήνυμα 
Σφάλμα link στο google & social media 10 dmarop 03 Απρ 2015 00:51
geomagas Εμφάνιση τελευταίου μηνύματος
 
Τώρα είναι 29 Μαρ 2017 19:01 | All times are UTC + 2


Email This Page to Someone! add to Favorites

     Powered by p h p B B © 2001,2005 p h p B B Group
Για άμεση επικοινωνία με τον διαχειριστή του freestuff.gr στο email: freestuff.gr(παπάκι)gmail.com


Copyright © 1999-2013 Freestuff.gr All Rights Reserved  
Version Aegean, designed by N. Tsaganos