Post in double column when open

  • Resolved christianitaly

    (@christianitaly)


    7 years, 1 month ago

    Hello Ben,

    I’d like to ask you some help with a fixing.

    Inside a post section i removed the left-sidebar. And i’d like that in computer version (with wide screen) the post fills the space that remains free, occupying two columns.

    At the moment i had a class (‘Pezzo’) to the article tag in the content.php file:
    here’s the little piece of code

    <div <?php post_class(); ?>>
	<?php do_action( 'ct_mission_news_post_before' ); ?>
	<article class='pezzo'>
		<?php ct_mission_news_featured_image(); ?>
		<div class='post-header'>

    and then i tried to re-size the dimensions with some CSS:

    .pezzo {
background-color: coral; /* i add color on background just to see changements */
width: 720px;
  position: relative;
  left: -230px;
}

    The problem is that changements don’t adapt to screen resizing.
    Have you some advices on how operating on?
    There’s another simple way to move?

    Thank you very much.
    Christian

    p.s. I had another little thing to ask you: how can i rewrite the ‘read more…’ at the end of a excerpt?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hey Christian,

    There are a couple things you’ll want to change in this snippet. First, you can use a “media query” so that the code doesn’t affect mobile devices.

    @media all and (min-width: 800px) {
  .pezzo {
    background-color: coral; /* i add color on background just to see changements */
    width: 720px;
    position: relative;
    left: -230px;
  }
}

    With this update, the code will only affect screen sizes that are 800px wide or wider (which is desktop computers and landscape orientation tablets).

    Next, I’d recommend using percentages instead of fixed pixel values since this is how the rest of the layout code in Mission News is written. Here’s an example of how that might look:

    @media all and (min-width: 800px) {
  .pezzo {
    background-color: coral; /* i add color on background just to see changements */
    width: 80%;
    position: relative;
    left: -5%;
  }
}

    I just made up these values right now for the example, but if you adjust them you should be able to get the layout you want.

    Thread Starter christianitaly

    (@christianitaly)

    Thank you very much Ben, now goes great!

    Theme Author Ben Sibley

    (@bensibley)

    Happy to help ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Post in double column when open’ is closed to new replies.