[resolved] Change width sidebar for ONE page (4 posts)

  1. gehaktmolen
    Posted 2 years ago #

    Hi all,

    I know this question the 'how to change the width of sidebar on one page?' has been asked before a lot, but the things I found didn't solve my problem..
    As you can see on my TWENTYFOURTEEN website (http://www.danielelgersma.com) I want the sidebar(= the black background) on the first page to be as wide as the photo. In CSS I tried this:

    .page-id-25 #secondary {width: 838px;}

    But that will only work for the width of the photo. It won't change the width of the sidebar.. The thing that changes the width of the sidebar:

    @media screen and (min-width: 1080px)
    {.site:before {width: 422px;} }

    But that only works for all the pages. Is there a way to make it wider than 422px only on the first page? I would appreciate your help very much!! Thank you.

    PS: I'm doubting that the black background actually IS the sidebar.. Is it or is it not?
    PSS: Changing the width of the white background(content?) is of course also possible. Any idea how to?

  2. Michael
    Forum Moderator
    Posted 2 years ago #

    combine the two:

    @media screen and (min-width: 1080px) {
       .page-id-25 site:before {width: 422px;}

    you can also use .home instead of .page-id-25 to target the home page.

  3. gehaktmolen
    Posted 2 years ago #

    Thanks a lot for your reply! Unfortunately though nothing changes after changing ".site:before" into ".page-id-25 site:before". This is my full child-CSS:

    @media screen and (min-width: 1080px) {.site:before {width: 422px;}}

    #secondary {width: 422px; padding-left:0;}

    body.home .entry-title {
    display: none;}

    .page-id-25 #secondary {width: 838px;}

  4. gehaktmolen
    Posted 2 years ago #

    Ik heb 'm! Je zat dichtbij. Het moest zijn: .page-id-25 .site:before

    Nogmaals bedankt voor je tip :)

Topic Closed

This topic has been closed to new replies.

About this Topic