Need help? Check out our Support site, then


wider post in imbalance 2

  1. sincerelyfiona
    Member

    Hi,
    is there any way I can maximise the viewing of my post, at the moment, there is this white gap on the left and side of my post, which I think is a waste of space. I want to make it as wide as possible like this one
    http://thepatternedplate.com/2014/03/31/calvin-hobbes-peanut-butter-ice-cream/

    This way, I have the maximum viewing experience of the post.

    please help.

    The blog I need help with is sincerelyfiona.com.

  2. sincerelyfiona
    Member

    I want to move the "previous" and " next" buttons up, aligning with the:

    By Sincerely Fiona / May 26, 2014 / Main Meals, Snacks & Treats / One comment

    etc etc.

  3. Hello! Apologies for the delay. I think this was missed since you added an extra reply and so it looked like you already had an answer before when you didn't!

    I checked your latest post:
    http://thepatternedplate.com/2014/06/04/strawberry-rhubarb-jam/

    And it looks the same as the other post you mentioned:
    http://thepatternedplate.com/2014/03/31/calvin-hobbes-peanut-butter-ice-cream/

    At least with regard to the images and main post content area…

    I want to move the "previous" and " next" buttons up, aligning with the:

    By Sincerely Fiona / May 26, 2014 / Main Meals, Snacks & Treats / One comment

    etc etc.

    You don't really need a wider post to fix that part. What's happening is that the Previous/Next links are in a container that is setup to be 210px wide and the text inside that area is right aligned so that makes a gap appear to the left.

    To get rid of that gap to the left of Previous/Next links at the top of posts, you could add this to your Appearance > Customize > CSS editor:

    #nav-above {
    	width: auto;
    }

    Does that get you to the result you were looking for?

  4. Hi,

    That CSS code solve the "previous/next" problem, but I also want the post text, so "my blog ttext and images" to move all the way to the left, so the post occupied the full wide of the white area.

    If you look at http://thepatternedplate.com/2014/06/04/strawberry-rhubarb-jam/, you can see that the post and images goes to the full width of the white area, how can i do that?

    Thanks,
    Fiona

  5. but I also want the post text, so "my blog ttext and images" to move all the way to the left, so the post occupied the full wide of the white area.

    In context of the structure of the page you're working with, that's not a simple change at all.

    What you've described sounds like you want to completely change the structure of the page. Before you try doing something like that, let's take a look at the structure of http://thepatternedplate.com/2014/06/04/strawberry-rhubarb-jam/ as an example.

    In web design, a page is constructed of a series of HTML elements, each of which has box properties. Most are blocks that fit inside each other. In the Imbalance 2 theme, the top level element in the main structure is the ID "wrapper" and the one that contains the bulk of the content is the ID "main" To visualize these container elements, add this to your Appearance > Customize > CSS editor and preview the site without saving:

    #wrapper {
    	border: 2px dashed red;
    }
    #main {
    	border: 2px dashed aqua;
    }

    See how one is nested inside the other? Because of the way that is setup in this theme, you would need to make the wrapper container wider in order to also make any of the container elements inside it wider.

    So, now that you can see the container elements well using the border examples above, you should notice that the blog text and images are already all the way to the left inside the container and to make them go further to the left you would either need to expand the content area to full width (not recommended) or left align the main container (wrapper) itself so that everything moves completely left all together. It would also be a good time to note that once you make a seemingly small structure change like expanding the width of a main container element, there are a number of other tweaks and additional changes you may need to find and change to get it looking good again. You can see what I mean if you preview a small example CSS that increases the "wrapper" width by 200px:

    #wrapper {
    	width: 1160px;
    }

    Making a change to adjust the structure like that is no small task! A lot of the inner container elements would need to be adjusted too, and it would take some time and work to sort all of that out.

    In the scenario above, you may also want to note that different computer displays are at different widths, so the white space you are seeing to the left and right of the main container element is variable, and it will look different to different people using different computers and devices. This is one of the things web designers have to take into account when structuring a page or making design changes with CSS.

    Here is another quick example that shows moving the entire container to the left by undoing the CSS that was making it centered. This accomplishes the task you've outlined to move the blog and text all the way to the left, but I am not sure it's really what you want to do:

    #wrapper {
    	margin: 0;
    }

    One last solution might be to make the width of the content area 100% wide to fill the browser, but that is not recommended at all because it makes layout hard to manage at large screen sizes making the image alignment go wonky (they would all need to be adjusted to work better for variable widths and would never look the same at different browser widths) and the text would become hard to read at large browser widths. To see an example of making the content 100% width, here is a small CSS starter snippet that covers just the main structural elements:

    #wrapper,
    .entry-content,
    #comments {
    	width: 100%;
    }

    Hopefully this clarifies a little bit about how pages are setup in the Imbalance 2 theme and shows you some possible options for moving the text and images to the left like you've asked about.

    The CSS examples above aren't complete but are rather designed to give you an idea of possible directions for making the change you want. Try them out in the preview so you can get a better idea of what you want to change. From there, I can direct you in learning how to make the CSS changes to get the end result you're after.

Topic Closed

This topic has been closed to new replies.

About this Topic