Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 17, 2015 at 10:37 am #381208
    tvl76

    Hi guys
    1. All content should be 910px width except for (I changed that easily within the enfold admin panel)
    2. Blog content should be only 660px width
    3. Content will be on the same page

    I did the following changes within style.css:

    
#top .fullsize .template-blog .post .entry-content-wrapper{text-align: left; font-size:18px; line-height: 150%; max-width: 660px; }

#top .fullsize .template-blog .post .entry-content-wrapper > *{ max-width: 660px; }

#top .fullsize .template-blog .big-preview img{width:660px;}

.fullsize .big-preview .avia-gallery {width: 660px;}

.comment_container{max-width: 660px;}

    As result I have
    – text and avia-gallery reduced to 660px and perfectly centered,
    – big preview img, related posts and comments reduced to 660px BUT oriented left,
    – Audio and Video preview NOT reduced.

    My question: Is there a parent css-style (or php) for the blog.content only which I can adress a max-with of 660px to? I could not find it yet…

    Thx for your help in advance!

    January 19, 2015 at 7:09 pm #382028
    Josue

    Hi,

    You can prefix the .single-post class to your selectors so they only affect single-view Posts:

    #top.single-post .fullsize .template-blog .post .entry-content-wrapper{text-align: left; font-size:18px; line-height: 150%; max-width: 660px; }

#top.single-post .fullsize .template-blog .post .entry-content-wrapper > *{ max-width: 660px; }

#top.single-post .fullsize .template-blog .big-preview img{width:660px;}

#top.single-post .fullsize .big-preview .avia-gallery {width: 660px;}

#top.single-post .comment_container{max-width: 660px;}

    Regards,
    Josue

    January 20, 2015 at 2:54 pm #382465
    tvl76

    Hi Josue
    Thx for your reply and the solution – which works to the extend you described it. Unfortunately, I think I did not describe my issue exactly enough. So I’ll try again.

    I have the Content width set to 910px on all pages. I want the blog preview and fullsize-view to be only 660px width!
    With the code I posted before I have the issue that big preview img, related posts and comments are reduced to 660px BUT oriented left instead of centered as I wanted them to be. Audio and Video preview are not reduced at all.

    How do I get all the blog stuff on a width of 660px?

    Thx
    Tim

    January 20, 2015 at 2:56 pm #382469
    tvl76
    This reply has been marked as private.
    January 23, 2015 at 9:33 am #384251
    Ismael

    Hey!

    Add this on Quick CSS to modify the width and alignment of the featured image:

    #top .fullsize .template-blog .big-preview img {
width: 100%;
max-width: 660px;
margin: 0 auto;
}

    Best regards,
    Ismael

    January 23, 2015 at 10:11 am #384263
    tvl76

    Hey Ismael!
    This works just fine! I changed it to

    #top .fullsize .template-blog {
width: 100%;
max-width: 660px;
margin: 0 auto;
}

    so that all post-types are reduced to 660px.

    BIG Thx!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to have the blog width smaller than the main content?’ is closed to new replies.