WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Cannot change the width of one-column body of Twenty Twelve (13 posts)

  1. Masato
    Member
    Posted 1 year ago #

    Hello, I am using Twenty Twelve with one-column setting.
    I tried to change the width from 960px to 640px, but I could not succeed after all.
    Here is the page I would like to adjust.
    http://abirdwhale.com/category/blog-en/

    Here is the content of style.css file of my child theme.

    [no need to post CSS - it's all visible on your site ]

    As I failed to adjust the child theme successfully, I also tried replacing all the number '960' with '640', but nothing happend.

    The page I pasted in the beginning is showing the articles from a certain category, not all the articles.

    I sincerely appreciate your help.
    Many thanks,

  2. Masato
    Member
    Posted 1 year ago #

    Here is the part I added to style.css of my child theme to change the width.

    /* This Block Adjusts the Overall Theme Width */
    footer[role="contentinfo"] {
    	max-width: 640px;
    }
    @media screen and (min-width: 600px) {
    	.site {
    		max-width: 640px;
    		max-width: 45.7142857143rem;
    	}
    }
    .ie .site {
    	max-width: 640px;
    }

    Many thanks for your help,

  3. michmeow
    Member
    Posted 1 year ago #

    Thank you for this solution, was looking for it :)

  4. Masato
    Member
    Posted 1 year ago #

    Sorry, this was misleading. In my situation, the code above did not solve my problem...!
    I am still waiting for advice.

  5. Masato
    Member
    Posted 1 year ago #

    This was solved as time went by (I just re-widened it to 720px from 600px)!

    However, I wanted to keep the size of top banner (abirdwhale.com) and menu (Main, Facebook, YouTube Channel etc.). Is there any good way to keep (or widen) their size?

    Very many thanks,

  6. paulwpxp
    Font hero
    Posted 1 year ago #

    Instead of .site, use .site-content.

    Remove all modifications for that part, and try this.

    @media screen and (min-width: 648px) {
    	body.template-front-page .site-content,
    	body.single-attachment .site-content,
    	body.full-width .site-content {
    		width:600px; margin:0 auto; float:none;
    	}
    }

    Edit: in @media use 648px not 600px because of the paddings

  7. Masato
    Member
    Posted 1 year ago #

    Thank you so much. I appreciate you kindly told me about paddings as well, I was confused about 648px.

    What would it be if I want to make the width '720px'?
    Would it be something like this?

    @media screen and (min-width: 648px) {
    	body.template-front-page .site-content,
    	body.single-attachment .site-content,
    	body.full-width .site-content {
    		width:720px; margin:0 auto; float:none;
    	}
    }
  8. paulwpxp
    Font hero
    Posted 1 year ago #

    For 720px, use this.

    @media screen and (min-width: 768px) {
    	body.template-front-page .site-content,
    	body.single-attachment .site-content,
    	body.full-width .site-content {
    		width:720px; margin:0 auto; float:none;
    	}
    }

    Notice the 768px in @media, it's from 720px plus 48px ( 24px paddings left and right )

  9. Masato
    Member
    Posted 1 year ago #

    Thank you again paulwpxp.

    I'll try that code, and see how it works.
    So, do you think I don't have to include 'rem' width in this case?

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    You can if you want. But what's the point of using rem when the browsers that understand rem also understand px, in fact all the browsers understand px.

    It goes like this.

    If you use rem, you have to also use px as fall back for browsers that don't get rem.

    If you use px, just use px.

    rem is useful when you want to change thing based on font size of the root, in this case we don't care about that, we only want the exact width.

  11. Masato
    Member
    Posted 1 year ago #

    Thanks a lot for the further explanation. I was thinking about adding rem just because the default style.css of Twenty Twelve includes it.
    Actually I need to study more to do things accurately.

  12. paulwpxp
    Font hero
    Posted 1 year ago #

    Actually I need to study more to do things accurately.

    We all start doing just that, and then gradually fall into the "whatever works" zone just the same :)

  13. Masato
    Member
    Posted 4 months ago #

    I am sorry for being late to make this topic resolved. Thanks a lot for your very kind support, paulwpxp.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.