Need help? Check out our Support site, then


Wider content with Motif Theme

  1. I use the customized Motif Theme and I was thinking if it's possible, that the content-width would be wider than at is defined by wordpress, so that my pictures can be shown in a higher definition for people who have bigger screens (I imagine, that it needs to be a higher percentage of the screen's definition, so that it's still responsive?)

    I'm completely new with CSS, but maybe someone can help me out?

    The blog I need help with is paleica.wordpress.com.

  2. Motif is an advanced responsive width theme, and we have to be careful how we do things. Are you wanting to decrease the width of the right sidebar, or keep it the same and just increase the content and overall width of your site?

  3. i would prefer to just increase the content and overall width of the site.

  4. Ok, let me work on that. From the looks of things we will need to use media queries and it will take a bit of time to sort them out so that they retain the responsive design.

  5. oh, no problem!! thank you!!

  6. Give the following a try. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

    @media screen and (min-width: 1200px) {
    #page {
        max-width: 1400px;
        width: 100%;
    }
    .content-area {
        width: 70%;
    }
    .sidebar-widget-area {
        width: 22%;
    }
    .entry-thumbnail img {
        width: 100%;
    }
    }

    In the Content Width field below the CSS area, enter 925 for the maximum media width and save. The images you have inserted into the posts may need to be reinserted to take advantage of the new width. Reinsert them at "full size".

  7. that's AWESOME, thank you!!
    i only have one question: is it possible, to exclude that from the static front page or to place the widgets from the "home page" in the center of the screen as this looks a little bit strange:

    http://paleica.wordpress.com/

  8. oh, it seems i discovered a problem: my old pictures, like from 2008 (you can see expamples of posts here) were uploaded in a much smaller resolution and they aren't displayed at all...

    http://paleica.wordpress.com/2008/08/

    can this code be used as a "maximum" - like "if the pictures are uploaded with 1000px*xy they're displayed large but if they're uploaded smaller, they're presented smaller.

  9. excuse me to kind of "spam! here - i just realised it seems like the change in the css sheet doesn't have anything to do with my disappeared images (from 2008). they cannot be displayed because they aren't found. i'm wondering about that as i haven't changed anything in my media library... do you have any idea what could have happened to those pictures?

  10. I checked all your posts from 2008, and don't see any missing images. For those posts, to get the images to be full width, edit the post, delete the image and then reinsert it at full size.

    The top featured article would be difficult to make full width, so my suggestion would be to exclude that page from the widening we did by adding the following CSS.

    .home #page {
        max-width: 1140px;
    }
  11. thank you! i love it! it works great! and i solved the problem with the missing pictues - it's no wordpress issue! thanks for your support!

  12. You are welcome.

  13. there's one little possible improvement left with this topic: i thought about excluding also the blog-page "http://paleica.wordpress.com/blog/" from the broader content (similar to the home page) as the featured images are a little blurred so that only the post pages are shown with a greater width. is this possible, too?

  14. To exclude your blog page from the widening, replace what I had given you before with the following. I've also excluded the single post pages, since they have the same issue as the main blog page.

    .home #page, .blog #page, .single #page {
        max-width: 1140px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic