I found another post and added this CSS and the layout is what I was looking for...

.article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery { margin: 0; } .article-list .article-body { display: contents; } .article-list .article { display: grid; grid-template-columns: .5fr 1fr; gap: 0 20px; } .article-list .article > a, .article-featured-audio, .article-featured-video, .article-feature-gallery { grid-row: 2/6; } .article-header { grid-row: 1/2; grid-column: 1/-1; } .readmore { grid-row: 5/6; justify-self: end; }

What CSS would I need to add to adjust the size of the images by 50%?

Right now the images are sized at 600pb; but, within the Category layout they are sized at 400px within the layout. Ideally I'd like them sized around 250px roughly.

Thanks Trey

I ended up adding this to pull the introtext over to the left...

.article-introtext { margin-left: -155px!important; }

When I look at the page on a mobile phone the image is small and out of place when viewed.

Why is that happening and what is the solution to fix it?

Trey

Hi Trey,

If you used custom CSS without @media rule it will be used on all views, also Mobile and Tablet view. It's a normal browser (for all browsers!) behavior.

If you want to use selected style for Desktop view only it should be used like that

@media screen and (min-with: 1024px) {
HERE-ADD-CSS-CODE-FOR-DESKTOP-VIEW-ONLY
}

OR for MOBILE ONLY

@media screen and (max-with: 780px) {
HERE-ADD-CSS-CODE-FOR-MOBILE-VIEW-ONLY
}

Do you understand now? More detailed guides you can find on YT, Google, Bing etc..

Thanks Paul...

I was making it far more complicated than it should be...after sleeping on it I just decided to utilize bootstrap classes for columns...

{col-lg-2 col-sm-6} and {col-lg-10 col-sm-6} within the article.