alter main content width where portfolio thumbnails are. Swell theme

laurapalmerwp · Member · Dec 21, 2015 at 3:25 pm
Copy link

Add topic to favorites
I’d like to increase the width of the main content to 930px on this page. I have managed it with the heading but not where the thumbnails are. The div id is “posts-scroll” I believe..

See https://palmerowen.wordpress.com/showcase/

The blog I need help with is: (visible only to logged in users)
therichmonderatlarge · Member · Dec 21, 2015 at 3:42 pm
Copy link
Hi! It looks like the posts-scroll div is currently set to a width of 1379 px. What would you like the end-result to look like for this page?
laurapalmerwp · Member · Dec 21, 2015 at 3:47 pm
Copy link
Thanks for emailing me. Yes I can see that dimension too.

I just want the thumbnails to align with the rest of the main content site-wide. So the thumbnails will left align with the heading above them and be 930 px in width – which means the thumbnails will increase in size.

Fyi – When I altered the main content width in the Home page (where these thumbnails also are) it seemed to resize the thumbnails automatically.

I have to go now – but if you have any suggestions – I’ll be looking again this evening. Any help gratefully received!
supernovia · Staff · Dec 23, 2015 at 11:07 pm
Copy link
Hi @laurapalmerwp,

I’m still not quite we’re following what you’re after. It looks like you’ve got quite a bit of custom CSS in place, too, and I don’t want to break anything that you were trying to accomplish there.

But I did do some tests on a demo site. The portfolio thumbnails have a lot of fancy effects as you resize windows and what not, and that could be where you’re meeting some resistance. Aligning the content to the thumbnails seems to be the easier route.

In my testing, I used this to get rid of some of the extra space around the content. You may want to make your font bigger too so you don’t get really long lines on wide screens:
```
#portfolio-content {
    max-width: 1300px;
    margin: 0 1%;
}
```
If you want to align the titles as well (parts that aren’t affected by the 30px margin you’ll see in other parts of the site) something like this may do, though you’d need a variation for smaller screens. Personally I think it looks better centered anyway.
```
.entry-title {
    text-align: left;
    margin-left: calc( 30px + 1% );
```
Let us know whether that helps.
laurapalmerwp · Member · Dec 24, 2015 at 11:12 am
Copy link
Thanks for helping – but still rather the thumbnail alignment matches the rest of the content, rather than the other way as you suggest. I have managed to do this on the home page, where the same thumbnails also sit (in a turquoise block). But its harder to do on this page for some reason!
supernovia · Staff · Dec 24, 2015 at 5:29 pm
Copy link
Ok, what about something like this?

#projects { margin: 0 auto; max-width: 820px; }

It’s 820 instead of 800 to compensate for the 10px padding on the inner div of those images. You may need to make adjustments for smaller screen sizes.

Also, this would conflict with some of the other CSS you’ve added, so you may need to remove the extra CSS first to see how that looks.
laurapalmerwp · Member · Dec 24, 2015 at 7:45 pm
Copy link
Thanks for the suggestion. I have tried it but that just undoes what I have done to the home page’s showcase thumbnails and makes the showcase page’s thumbnail less aligned!!
supernovia · Staff · Dec 25, 2015 at 12:12 am
Copy link
@laurapalmerwp OK, it’s conflicting with some of your other CSS. I’m not sure what it’s for.

If you’d like, *I think* you can select just that page like so:
```
.page-template-portfolio-page #projects {
  margin: 0 auto;
  max-width: 820px;
}
```
But again, this is trickier to test with all of your other CSS. And you’d also need to resize the page to see it in action (forcing the browser to re-calculate) I can say this has worked without the extra CSS you have. Hopefully these tips will help you sort things out.
laurapalmerwp · Member · Dec 26, 2015 at 3:45 pm
Copy link
this seems to have an effect – but need to tweak things. Thanks – will try again later
supernovia · Staff · Dec 29, 2015 at 1:37 am
Copy link
Sounds good, @laurapalmerwp . Cheers!

No items found.