Thumbnail Alignment Math

[RyanReese]

I’m sure this is a simple fix but my brain just isn’t working:

ht tp://pu nah ou-22 12.prev iew.fi nal sit e.com/

If you look to “INSIDE FALL 2017” , there is the 780x500 image. The pink background is the elements container, which if you look at the <article>, it’s margin-left: calc(50% - 590px) which moves it within a 1180px grid on the left side, but not the right. Now, I need that image to take up 50% of the viewport, minus 20px. I can’t do vw because of the scrollbar being included. It should look something like this. https://www.screencast.com/t/81fzBiiFJpo

Just can’t seem to think of the math this requires. I could use Javascript for this but I’d prefer not to.

This page isn’t responsive at all yet so ideally you look at it in a large screeen (1440 or above). Working on the responsive part soon.

[PaulOB]

Can’t really work out what you mean but if you want that image to take up 50% of the width of the screen of an 1180px grid then surely its just this:

.bulletin .top-stories article .fsThumbnail {
    width: calc(100% - 590px);
}

[RyanReese]

Bingo…Long story short, I had tried that but noticed the INSIDE FALL 2017 and the vertical gray line didn’t adapt when I’d put a max-width: 1440px on that parent element (just to test out different “screen sizes”). Obviously the gray line didn’t move because it’s a different element…nice. Thanks Paul. Just need to make it through today and I’m off until Tuesday