Hi CompulsiveCollector,
Have you tried to modify the Menu Item Photo Width/Height settings under Menus > Settings? That will change the size of the featured image that is printed by default — you’ll need to regenerate thumbnails after changing it.
But the actual size that the photograph is displayed at will depend on your theme. If you’d like me to take a look, send me a link and I can tell you the size the thumbnails appear at for certain breakpoints, and the size of the underlying image that is being served.
Yeah, it’s the size at which it’s displayed on the page that is the problem. I’m using the Frontier theme. I’ve edited size options in multiple places and also followed these instructions after uploading a child theme, but no matter what I do, the images still display at 268 x 268 px on the page.
Here’s the test menu I’m trying to alter. I like the plugin so much, but I just need these images to be smaller on the page.
Ok, so there’s a difference between the size of the thumbnail image that is being served to the browser, and the size which the browser is told to display that file. Right now, you’re loading an image file that is 417×417 pixels in size. But it will not show any larger than 33% of the available space, which works out to 268×268 pixels on large screens.
If you want to change the size of the images I’d recommend you add CSS code like this:
@media (min-width: 451px) {
.fdm-menu .fdm-item-panel .fdm-item-image {
width: 33%;
}
}
Adjust the width percentage larger or smaller to get the results you desire.
Brilliant. That works perfectly. One more question, and then I will absolutely stop bothering you. Is there a way to get the text to take up a larger percentage of the area now that the images are occupying less of the space?
Thanks so much for your help!
Try this, adjusting the left-padding to be just a bit more than the width of the image:
.fdm-menu .fdm-item-has-image .fdm-item-panel p {
padding-left: 35%;
}
Thank you SO much! Everything is wonderful now.
