Custom (smaller) image sizes for mobile

Site URL: https://uesprivatepsychotherapy.com/about

I'm a freelancer helping a client tweak the layout of her site. She has a list of her education credentials at the bottom of her About page that looks great on desktop browsers, but I'm trying to adjust it for mobile sizes so that the icon for each institution doesn't scale up to full screen width. How can I target these specific blocks, and scale them down? Ideally, they'd be in a grid with the icon + title and caption, but just a list would also look good. Any suggestions for how to approach this? Thanks!

On 6/27/2022 at 2:31 AM, simonabrams said:

Site URL: https://uesprivatepsychotherapy.com/about

I'm a freelancer helping a client tweak the layout of her site. She has a list of her education credentials at the bottom of her About page that looks great on desktop browsers, but I'm trying to adjust it for mobile sizes so that the icon for each institution doesn't scale up to full screen width. How can I target these specific blocks, and scale them down? Ideally, they'd be in a grid with the icon + title and caption, but just a list would also look good. Any suggestions for how to approach this? Thanks!

Edit to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_14_1515758507753_75760~.row .image-block {
    width: 30% !important;
    float: left !important;
}}

On 6/29/2022 at 9:56 PM, tuanphan said:

Edit to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_14_1515758507753_75760~.row .image-block {
    width: 30% !important;
    float: left !important;
}}

 

Perfect - thanks so much!