The situation is that I put an image widget inside a row element. Due to the higher resolution of the image, the displayed size on the page is larger, spanning the entire page, and I want to make it smaller by adding
max-height: 300px;
into CSS Declarations, but seems it only let the image overlaps with the next element inside the same row.
The image size stays the same as you can see in the previously attached screenshots (compare 10:08:30 with 10:12:28).
I think the easiest way is to control this with paddings added to the image widget. Widget Style -> Layout. I suggest setting it to 0 30 0 0 using % - or something similar. You can also adjust these paddings on mobile.
Hi there,
Is there a suggested way to control the image size between paragraphs?
Currently, it shows a full-size image. And the layout will be broken if I directly set the max-height CSS in the widget.
Thanks!
Attached files: 截圖 2023-02-28 上午10.08.30.png
截圖 2023-02-28 上午10.12.11.png
截圖 2023-02-28 上午10.12.28.png
Hi,
I'm not sure I fully understand your question. Can you please explain what are you trying to achieve? I'm sorry for the inconvenience.
Kind regards,
Timea
OrionThemes
I just noticed that ; is missing from your CSS. It should be:
I hope this helps.
OrionThemes
Hi Timea,
Sorry for not being clear.
The situation is that I put an image widget inside a row element. Due to the higher resolution of the image, the displayed size on the page is larger, spanning the entire page, and I want to make it smaller by adding
into CSS Declarations, but seems it only let the image overlaps with the next element inside the same row.
The image size stays the same as you can see in the previously attached screenshots (compare 10:08:30 with 10:12:28).
I think the easiest way is to control this with paddings added to the image widget. Widget Style -> Layout. I suggest setting it to 0 30 0 0 using % - or something similar. You can also adjust these paddings on mobile.
OrionThemes
A graceful workaround! Thanks!!