Hominis Posted June 6, 2022 Share Posted June 6, 2022 Site URL: https://www.nokoriware.com/blog/2022/6/4/may-2022 Hello! I need help adjusting the size of images as they appear on my website's blog posts. The relevant URL is attached to this post as the "Site URL." I've found code online that helps me adjust the padding on the bodies of text (since originally it was too narrow). But now I need help adjusting the images. When the website is fullscreen on a desktop web browser, they appear very large in comparison to the bodies of text, and it requires a lot of scrolling to get to the next body of text. Anytime I search this problem on Google, I end up only seeing a bunch of pages discussing the resizing of the images themselves for an image block. Is there any way to add padding to these images to set a max width for them so that they don't appear so large on higher resolution monitors? For example, I'm using a 2K monitor, so the image sizes are quite large. I've attached a screenshot of how it looks on a maximized browser window for me. Thank you for your time and I hope one of you can help! Link to comment
derricksrandomviews Posted June 6, 2022 Share Posted June 6, 2022 I use spacer blocks to reduce image block size. They allow a lot of sizing flexibility. Link to comment
Hominis Posted June 7, 2022 Author Share Posted June 7, 2022 22 hours ago, derricksrandomviews said: I use spacer blocks to reduce image block size. They allow a lot of sizing flexibility. I don't think this solution is suitable. This needs to affect all block pages, not just one. Unless there's a way to edit the template for all blog pages in one go? Link to comment
derricksrandomviews Posted June 7, 2022 Share Posted June 7, 2022 (edited) There should be a way to do this with custom css I think. This may do it, Resize with CSS Transform:scale is custom CSS code that you would enter under Design/Custom CSS. The (.5) within the transform:scale will reduce the image by 1/2 the size. You can decrease and increase this number until you get the image size that you want. .sqs-block-image { transform:scale(.5); } To resize an image on mobile only use a mobile media query: @media only screen and (max-width:640px) { .sqs-block-image {width:50%; margin:auto}} If you want to resize only a particular block or section include the block or section id before sqs-block-image. For example: #block-yui_3_17_2_1_1629676975747_7760.sqs-block-image Edited June 7, 2022 by derricksrandomviews Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment