How to do visual adjustments on Front Page 4 module and widgets in Atmospher Pro

[Doug]

This is my home page

Home

On the Front Page 4 module (titled Featured Productions), I’d like to make changes to the way each Genesis - Featured Page widget is being displayed.

I’m not sure where to edit this, and am guessing it uses CSS? Here are the visual adjustments I’d like to make:

1 - Increase the size of each widget and it’s image
2 - Add a background color to each widget (white)
3 - Change the background color of the entire Front Page 4 section

Greatly appreciate any input on where to adjust this

http://arrovox.com/

[Brad Dalton]

You can inspect each element, find the existing CSS rules and modify theme to change the styling.

---

Tutorials for StudioPress Themes.

[Doug]

Thanks. That link was very helpful.

I’ve located the element I’m wanting to change. I want to increase the dimensions of the image class img.entry-image.attachment-page so that it displays a larger thumbnail image.

Example of how the images display in the desktop browser window. Featured Productions font-page-4 section of http://www.arrovox.com
(If I shrink the browser window, the images jump to a much larger. I was looking for window dimension settings, but didn't see that in the HTML or CSS windows.)

I thought I would see an area named img.entry-image.attachment-page in the CSS window, and could then change it's parameters to test my results. However, I’m not seeing anything with that title.

Can you tell me if img.entry-image.attachment-page is the right element, and if so, where to modify it so it increases the display dimensions of the thumbnail for the page’s featured image?

Thanks

[Brad Dalton]

You can set the image width and wrap it in a media query.

Add @ before media on the 1st line of this CSS

media only screen and (max-width: 800px) {

    .front-page-4 .featuredpage img {
        width: 100px;
    }

}

Change the 800px and the 100px to suit your own requirements.

.featuredpage is a class used only for the Genesis featured page widget

---

Tutorials for StudioPress Themes.

[Doug]

Thanks, Brad.

I tried adding that code and adjusting the width amounts, but am not seeing any change in results.

I’ve added it to the Appearance > Customize > Additional CSS window, and also to style-front.css doc.

One thing I’ve noticed that’s odd is, when I shrink the browser size down significantly, the thumbnails popup to a large size. A size very close to what I’m trying to get.

I’m curious if that behavior sounds odd to you, and if you could clarify where I need to put the code you posted.

Here are 2 screengrabs, if helpful.

Thanks
Doug

[Brad Dalton]

Add CSS at the end of your style.css file and clear caching.

---

Tutorials for StudioPress Themes.

[Doug]

Thanks, Brad

Just tried that but it still isn't working. And was sure to clear the cache (using Chrome on a Mac).

Here's a screen of the code in the style.css doc
https://drive.google.com/open?id=1WVoeitcAkOzik5vXwEjX-lue01YLrv0A

Here's a snapshot of the front-page-4 section on the homepage at http://www.arrovox.com
https://drive.google.com/open?id=1vbp3wdnceIL0zhEtsTiamv04gNHlJ1aB

Do you see anything I might be doing wrong?
thx
doug

[Brad Dalton]

Hey Doug

The CSS rule will not render until the screen width hits 800px because its wrapped in a media query.

Based on my testing, it works. Tested twice.

Otherwise, you can remove the media query

 
.front-page-4 .featuredpage img {
        width: 300px;
    }

---

Tutorials for StudioPress Themes.

[Doug]

Thanks Brad.

I'm still seeing the tiny thumbnails when the screen is larger than 800p.
https://drive.google.com/open?id=1vbp3wdnceIL0zhEtsTiamv04gNHlJ1aB

I had some changes made to the site a few months ago, and perhaps there's a conflict in the code somewhere.

[Brad Dalton]

Where did you paste the CSS?

Also note, you can change the image size using the featured page widget settings.

---

Tutorials for StudioPress Themes.

[Doug]

Thanks, Brad.

I pasted the CSS into the style.css doc, at the very bottom. I've since removed it, as I was trying other things. But could put it back.

Regarding the featured page widget settings, yes, that was the first thing I tried, but I wasn't seeing any results that worked. My images are rectangle, so they won't work at the largest, 1200x1200 size. So I went the next largest horizontal size, 728x0. The "0" didn't make any sense to me, but figured maybe it was a way to enable it to scale.

Where I was confused is that the 728x0 didn't make it anywhere close to 728p wide. So thought it wasn't working for some reason.

I also tried removing the "50%" part of this
a.alignleft, a.alignnone, a.alignright {
max-width: 50%;
}

That's working for the desktop, but the mobile images are still tiny. So now I'm trying to sort out why the mobile images are still small, and where to change that.

[Brad Dalton]

You can add a custom image size in functions.php and regenerate thumbnails or upload the featured image to each page again.

add_image_size ( 'front-page-4', 300, 100, TRUE );

Modify the width and height values to anything you like.

I wouldn't modify in CSS unless you have a clear understanding what the modification will do.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

You could also write the CSS like this :

.front-page-4 .featured-content .entry-image {
	max-width: none;
	width: 250px;
}

In your case, i suggest you use the widget settings to change the image size.

---

Tutorials for StudioPress Themes.

[Doug]

Thanks, Brad. I would definitely prefer to use the Widget settings, but they don't seem to be working for me. When I select 728x0, which 728w should be more than wide enough, they continue to be tiny thumbnails, and I can't figure out why that doesn't make the thumbnails larger.

[Doug]

Brad

Want to give you an update.

In the style.css, I changed the following from 50% to 100%

a.alignleft,
a.alignnone,
a.alignright {
Max-width: 100%;
}

That seems to have fixed the desktop and mobile versions.

It seems to be working on every browser I test it on, so I think I'm good on this.

Thank you for your help on this. Greatly appreciate it.
doug

[Author]

Posts