javascript - How to implement 2 different grid structures in one section? -


i trying mimic header-graphic navigation site: http://wpengine.com/

it seems not applying grid on header-graphic area, having them separated 2 divs. in hero block (container) area. looking recreate giant content area (fluid content box 5 navigation buttons). please try stretch right side of browser, main navigation boxes stays @ same position , left area (content) extend fluid. trying create appearance.

these codes below code inspected google developer tool:

/* content navigation area */ .gwc_slide_buttons {   width: 375px;   height: 556px;   right: 0;   position: absolute; }  /* content area */ .gwc_slider {   left: 0;   right: 375px;   height: 556px;   position: absolute;   overflow: hidden; } 

what have in code:

/* content area */ .slider_content {   position: absolute;  }  /* content navigation area */ .slider_content_navi {   width: 430px;   position: absolute; } 

as can see here, tried both absolute positioning content , navigation button, not working should compare code have inspected.

does have suggestion?

here preview on jsfiddle.

this achieved through media queries aka different design different screen sizes. html stay same can apply absolutely different styles different screen sizes.

also noticed using twitter bootstrap. check it's grid system , responsive design support.


Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -