WordPress.org

Support

Support » Themes and Templates » Nesting Columns

Nesting Columns

  • anthonystal
    Member

    @anthonystal

    Hi,
    I was wondering if someone could help me with nesting columns. I have three rows of 6 images added in the style.css below the header widgets on the home page. Since page width is 12 columns, each image is 2 columns. I have tried several ways to make them nest nicely when shrinking the page, but have not found the right code. First, I just aligned 6 images in one row, each with row width c2. These looking nice and shrunk and expanded nicely, but all collapsed into one row after a certain page width when they could easy have stacked.

    Then I started with codes like the below, splitting each row into sections, first 2 sections of 6 columns, then 3 of 4, as below.

    <div class="grid">
    			<div class="row">
    				<div class="c6">
    					<div class="row">
    						<div class="c4"><a href="http://www.wwf.or.id/" target="_blank"><img src="/wp-content/uploads/client-logos/WWF.png"/></a>
    						</div>
    						<div class="c4 end"><img src="/wp-content/uploads/client-logos/EXPO.png"/></a>
    						</div>
    						<div class="c4 end"><a href="http://www.umn.ac.id/" target="_blank"><img src="/wp-content/uploads/client-logos/Client-List-v1_01.jpg"/></a>
    						</div>
    					</div>
    				</div>
    				<div class="c6 end">
    					<div class="row">
    						<div class="c4"><a href="http://www.wwf.or.id/" target="_blank"><img src="/wp-content/uploads/client-logos/WWF.png"/></a>
    						</div>
    						<div class="c4 end"><img src="/wp-content/uploads/client-logos/EXPO.png"/></a>
    						</div>
    						<div class="c4 end"><a href="http://www.umn.ac.id/" target="_blank"><img src="/wp-content/uploads/client-logos/Client-List-v1_01.jpg"/></a>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>

    but they do not expand to maximum width when nested, and at the same page width as before they all jump into one small column. I would like for the mobile users not to see 18 rows of one large icon, but perhaps 6 rows of 3 small ones. Please advise me, I would really endlessly appreciate it. Thanks so much! – Anthony

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Nesting Columns’ is closed to new replies.