responsiveness - Make Site Responsive -



responsiveness - Make Site Responsive -

i have responsive problems site.

the theme genbu , has been customized have 2 equal sidebars , narrower margins.

this custom css code:

class="snippet-code-css lang-css prettyprint-override">#main { padding: 10px; } .main-wrap { float: left; margin-left: 1rem; margin-right: 21rem; } #sidebar-primary-wrap { float: left; margin-left: 1rem; margin-right: -21rem; width: 20rem; } #sidebar-secondary-wrap { float: left; margin-right: -20rem; position: relative; width: 20rem; }

i have responsive problems 240x320, 320x480 and768x1024 device when checked site with: http://mattkersley.com/responsive/

can help me @media stuff?

@user29769 sum up, if want optimize 240px width site version, can : - align text articles (i checked , either solved issue, or work begenning) - cut down margins between left , right edges of screen , border of article - place searchbar elsewhere : under header, or can cut down size of search bar , maintain on same line search , cancel buttons.

always in mobile user head, should convinient ? also, utilize integrated developper webtool kit on web browser (f12), helps many things : - can locally edit in real time css seek stuff on elements - can adapt resolution of screen straight adaptive view - disable existing css rules, show calculated 1 ... helps in many way

finally, media queries utilize caution if want clean work : chose few resolution of screens, , create kind of intervals levels : [width < 240, 240 < width < 460, 460 < width < 768, etc...]

this way, can set media queries, , stick right adptatives codes it. (some guys create 1 css file per resolution, personnaly create media queries in 1 file, it's taste matter)

/* screens width lower 240px */ @media screen , (max-width: 240px) { .search-toggle-active.menu-search input { margin-left: 30px !important; } .search-toggle-active.menu-search .search-field { width: 12rem; } .main-wrap { padding:0; } }

i hope little help notice can create undersand basics responsiveness. moreover, hope helped solve issue

responsiveness

Comments

Popular posts from this blog

java - How to set log4j.defaultInitOverride property to false in jboss server 6 -

c - GStreamer 1.0 1.4.5 RTSP Example Server sends 503 Service unavailable -

Using ajax with sonata admin list view pagination -