html - Div are not showing up in right size for responsive webpage -

html - Div are not showing up in right size for responsive webpage -

i need design follow page responsive design.

i managed create work line have add together @ top of each row creating problem, breaks design , box container doesn't show of same size.

i tried set fiddle illustration design breaks on reason

fiddle update: http://jsfiddle.net/unjlu/5/

i need show page show in image below, how can accomplish responsive feature.

<div class="large-12 content"> <div class="cover-wrapper"> <div class="cover-inner"> <div> <img src="http://placehold.it/243x324&text=[img 1]"> </div> </div> </div> <div class="cover-wrapper"> <div class="cover-inner"> <div> <img src="http://placehold.it/243x324&text=[img 2]"> </div> </div> </div> <div class="cover-wrapper"> <div class="cover-inner"> <div> <img src="http://placehold.it/243x324&text=[img 3]"> </div> </div> </div> <div class="cover-wrapper"> <div class="cover-inner"> <div> <img src="http://placehold.it/243x324&text=[img 4]"> </div> </div> </div>

you have many custom widths set on divs. these custom classes overriding foundation classes.

if want utilize foundation classes here bluish print of way it..use small-centered , medium-centered classes center them on respective screens

class="snippet-code-css lang-css prettyprint-override">img{ margin:20px auto; } .header{ background-color:#7a1f13; } .slideshow{ background-color:#7a1f13; height:200px; } .footer{ background-color:#7a1f13; } class="snippet-code-html lang-html prettyprint-override"><link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/> <!--header area--> <div class="row header "> <h1 class="large-12 text-center">header</h1> </div> <div class="row slideshow"> <h1 class="large-12 text-center">slideshow</h1> </div> <!--header end--> <!--content area--> <div class="large-12 content"> <div class="row"> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> </div> <div class="row"> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> </div> <div class="row"> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> <div class="small-12 medium-6 large-3 columns"> <img src="http://placehold.it/243x324&text=[img 1]"> </div> </div> </div> <!--content end--> <!--footer area--> <div class="row footer"><h1 class="large-12 columns text-center ">footer section</h1></div> <!--footer end--> </div>

have row class , nest them according needs.- small-12 medium-6 large-3 columns.

if 768px, 640px , 340px breakpoints have alter media-queries. can next 2 methods.

1) utilize sass files of foundation , alter breakpoints 2) alter media-queries in css manually

fiddle link.

fullscreen view

html css responsive-design zurb-foundation