Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

#1 (permalink) Report Post How Do I Get My Design From 2 Columns to 1

Featured Replies

Let me start off by saying that I'm not a code guy. I just bought a new blog theme for my site www.convertingcopy.com (so you can see what I want) and I want to change the post look from the 2 columns on the main page to just 1, you'll see what I'm talking about at the site.

 

The designer behind the theme won't get into how to fix it but mentioned that changes need to be made starting at this point in the code which I've pasted below... I changed the widths from 276 to 560 so that when I just have one column it'll be the appropriate width and I changed the images associated with those parts, as well. I was hoping by increasing the width I would also force out the right column altogether so that it would just be one per row but as you can see, it's still two. Here's the code, maybe there's somewhere else in the code that I need to fix, but can anyone set me straight as to what to change or do?:

 

#content div#posts .post {

margin-right:11px;

background:url(images/post_bg.gif) repeat-y;

width:560px;

float:left;

margin-bottom:11px

}

 

#content div#posts .post.right {

margin-right:0

}

 

#content div#posts .post .categorie,#content div#posts.teal .post .categorie {

background:url(images/post_top.png);

height:33px;

width:560px;

color:#fff;

line-height:33px

}

  • Author

Here is the code for the main page, I'm pretty sure it's in here that I need to change but I don't know where the specific code which I need to take out is, can anyone point it out for me?:

 

<?php get_header(); ?>

<div id="content_container">

<div id="content_container_bg">

<div id="content">

<?php

//begin featured posts slider

if (function_exists('get_featured_posts')) {

?>

<div id="featured_posts" class="<?php echo get_option('fh_featured_color'); ?>">

<div id="slider">

<?php

get_featured_posts();

$arrfeatposts = get_featured_posts_id();

?>

</div>

</div>

<?php }

// end featured posts slider ?>

<div id="posts" class="<?php echo get_option('fh_posts_color'); ?>">

<?php

$odd_or_even = 'left';

query_posts(array('post__not_in' => $arrfeatposts));

?>

<?php if (have_posts ()) : ?>

<?php while (have_posts ()) : the_post(); ?>

<div <?php post_class($odd_or_even) ?> id="post-<?php the_ID(); ?>">

<?php $odd_or_even = ('left' == $odd_or_even) ? 'right' : 'left'; ?>

<div class="categorie">

<h3>

<?php

$categories = "";

foreach ((get_the_category()) as $category) {

$categories .= $category->cat_name . ", ";

}

$categories = substr($categories, 0, strlen($categories) - 2);

echo trimText($categories, 36);

?>

</h3>

<div class="icons"><a class="hide"><span class="hidden">hide</span></a></div>

</div>

<div class="min">

<div class="text">

<?php

if (has_post_thumbnail ()) {

?>

<div class="thumb_cont">

<a href="<?php the_permalink() ?>" class="thumb">

<?php

the_post_thumbnail();

?> <span class="hidden"> </span>

</a>

<a class="comments_balloon" href="<?php the_permalink() ?>#comments"><?php comments_number('0', '1', '%') ?></a> </div>

<?php } ?>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php echo trimText(the_title('', '', FALSE), 23); ?></a></h2>

<p><?php echo trimText(get_the_excerpt(), 160); ?></p>

</div>

</div>

<div class="more"><a href="<?php the_permalink() ?>">View More</a></div>

</div>

<?php endwhile;

else : ?>

<h2 class="center">Not Found</h2>

<p class="center">Sorry, but you are looking for something that isn't here.</p>

<?php endif; ?>

</div>

<a class="btnAllposts" href="<?php

echo get_pagelink_by_title('all posts');

?>">view more</a>

</div>

<?php get_sidebar(); ?>

</div>

</div>

<?php get_footer(); ?>

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.