Elxis CMS Forum

Ελληνικό Forum => Πρόσθετα => Topic started by: Dimitris Kanatas on February 22, 2017, 19:53:51

Title: Κεντράρισμα module σε responsive template
Post by: Dimitris Kanatas on February 22, 2017, 19:53:51

Γεια σας παιδιά!

Θα ήθελα να ρωτήσω αν ο κώδικας για να "κεντράρω" τα Module των θέσεων user1, user2, user3, user4 (#user4.row-fluid) του tempate Olympus είναι σωστός (έτσι δείχνει, δε ξέρω σε πολύ μεγάλες αναλύσεις):

Code: [Select]

#user4.row-fluid{
    display: flex;
    justify-content: center;
    align-items: center;
}
Γενικά βλέπω πως τα πρόσθετα του Facebook και του Google+ που θέλω να βάλω σ` αυτές τις θέσεις παρουσιάζουν κάποιες δυσκολίες στην responsive εμφάνιση. Ιδέες;

Title: Re: Κεντράρισμα module σε responsive template
Post by: datahell on February 23, 2017, 18:51:12

Μία χαρά δουλεύει. Ο κώδικάς σου είναι σωστός με την εξαίρεση ότι κολάς το #user4 με το .row-fluid που φαντάζομαι είναι άλλο αντικείμενο.

html δοκιμής
<div id="userx">
   <div class="row-fluid">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
</div>

css δοκιμής
#userx .row-fluid { display: flex; justify-content: center; align-items: center; }
#userx .row-fluid div { background:yellow; padding:10px; margin:10px; }

Χρησιμοποιώντας το display flex δεν πετυχαίνεις κεντράρισμα των module αλλά ίσα ύψη (flexbox model / css3). Αν θες απλά κεντράρισμα μπορείς να το κάνεις με ένα απλό text-align:center και display:inline-block για τα module.

Title: Re: Κεντράρισμα module σε responsive template
Post by: Dimitris Kanatas on February 24, 2017, 11:48:16

Γιάννη ναι εννοούσα το .row-fluid (το πήρα από το CSS Viewer ως #user4 .row-fluid)

Τελικά το display flex όχι μόνο ήταν αχρείαστο αλλά δημιουργούσε πρόβλημα.

Μπορεί να επανέλθω...  :)

Σ` ευχαριστώ φίλε μου

Title: Re: Κεντράρισμα module σε responsive template
Post by: Dimitris Kanatas on July 06, 2017, 13:55:18

Γεια σας,

Θα ήθελα προτάσεις για να αντιμετωπίσω τον διαφορετικό τρόπο προσέγγισης του inputbox σε firefox και chrome, όπως βλέπετε και στη σχετική εικόνα.

Αυτό συμβαίνει σε όλα τα inputbox π.χ. εγγραφής, αναζήτησης...

Title: Re: Κεντράρισμα module σε responsive template
Post by: Dimitris Kanatas on July 06, 2017, 15:04:12

Με δυσκολεύει το κεντράρισμα των module στο πλαίσιο που βλέπετε στην εικόνα... (σε μεγάλες αναλύσεις)  ιδέες;;;;

Title: Re: Κεντράρισμα module σε responsive template
Post by: datahell on July 06, 2017, 22:43:06

Για τα input box χρησιμοποίησε περισσότερους selectors. Παράδειγμα:
input.something, input[type=text].something, div.test > input.something { ... }

Κεντράρισμα: Ένα DIV element με display = block καλύπτει όλο το πλάτος της περιοχής που του δίνεις (100%). Για να τα "κεντράρεις" θα πρέπει είτε να τα κάνεις display-block είτε να τους δώσεις στάνταρ πλάτος. Και στις δύο περισσότερος margin αριστερά και δεξιά auto. Παράδειγμα:

div.x { display:block; width: 200px; float:none; margin:0 auto; }

div.y { display:inline-block; margin:0 auto; }

Title: Re: Κεντράρισμα module σε responsive template
Post by: Dimitris Kanatas on July 10, 2017, 09:31:30

Γιάννη πάντα δίνεις λύσεις....

Το συμπέρασμα που έβγαλα είναι πως αν χρησιμοποιείς template βασισμένο σε framework ψάχνεις και λίγο στα τυφλά για το που είναι οι ρυθμίσεις εμφάνισης. Δεν έβλεπα ότι τα input box "τραβούσαν" τον κώδικα CSS από το αρχείο bootstrap.min.css και ότι κι αν έκανα στα γνωστά μας αρχειάκια του template, δεν έπιαναν τόπο.

Επίσης στη θέση User4 που έβαλα στο template αναγκάστηκα να ορίσω συγκεκριμένο μέγεθος (1100px) με margin: 10px auto;  (ύστερα από πολλές αποτυχημένες προσπάθειες) και φαίνεται πως πέτυχα την εμφάνιση που ζητούσα.

Σ` ευχαριστώ Γιάννη!