Ecommerce Shopify WordPress Discussion

SVG on mobile too big, scales to the end of the container in WordPress [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers. This question does not appear to be about programming within the scope defined in the help center. Closed 7 days ago. Improve this question I am a beginner in Wordpress and with SVGs but i want to use them on a new homepage. This is the site: https://neu.anwalt-verden.de/ On desktop the SVGs looks fine, but on mobile screens they scale way too big. I think they scale to the end of the container and I don't know how to change it. I think I have to find the corresponding css file but I don't know how and what to do next? I want them very small, just for the overview. My SVG Files do not have viewBox yet, but if I add it, it is the same. This is the code in Wordpress: <!-- wp:columns {"align":"wide"} --> <div class="wp-block-columns alignwide"><!-- wp:column --> <div class="wp-block-column"><!-- wp:media-text {"mediaId":147,"mediaLink":"https://neu.anwalt-verden.de/arbeiter/","mediaType":"image","mediaWidth":15} --> <div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:15% auto"><figure class="wp-block-media-text__media"><img src="https://neu.anwalt-verden.de/wp-content/uploads/2023/12/Arbeiter.svg" alt="" class="wp-image-147 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">Arbeitsrecht</h3> <!-- /wp:heading --></div></div> <!-- /wp:media-text --> This is an example of the first SVG <svg width="512" height="512" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1"> <g> <title>Layer 1</title> <g id="svg_1"> <path id="svg_2" fill="#ff3c00" d="m159.13,169.721c5.633,58.338 43.367,96.867 96.873,96.867c53.5,0 91.228,-38.53 96.867,-96.867l7.988,-63.029c4.956,-61.924 -45.577,-106.692 -104.855,-106.692c-59.283,0 -109.814,44.768 -104.861,106.692l7.988,63.029z" class="st0"/> <polygon id="svg_3" fill="#ff3c00" points="256.003,438.031 278.751,375.92 266.06,311.26 276.255,304.462 276.255,290.113 256.003,290.113 235.745,290.113 235.745,304.462 245.941,311.259 233.249,375.92 " class="st0"/> <path id="svg_4" fill="#ff3c00" d="m463.212,422.569l-3.824,-24.35c-3.203,-20.417 -16.035,-38.042 -34.475,-47.361l-80.472,-40.693c-10.813,-5.46 -13.678,-22.243 -13.678,-22.243c-0.676,-1.096 -1.939,-1.686 -3.213,-1.488c-1.273,0.188 -2.308,1.113 -2.637,2.359l-9.432,36.254l-59.478,162.406l-59.486,-162.406l-9.43,-36.254c-0.328,-1.246 -1.363,-2.172 -2.637,-2.359c-1.273,-0.197 -2.539,0.392 -3.213,1.488c0,0 -2.865,16.783 -13.678,22.243l-80.473,40.693c-18.442,9.319 -31.272,26.944 -34.475,47.361l-3.826,24.35c-1.361,8.692 0.438,21.448 8.225,27.825c10.409,8.513 48.865,61.606 198.993,61.606c150.123,0 188.576,-53.093 198.986,-61.606c7.79,-6.377 9.587,-19.133 8.223,-27.825z" class="st0"/> </g> </g> </svg> Second question: I use "media and text" to write a title next to the SVG. On mobile it is always on top but not next to it, I don't know how to change that too. Can someone help me? I have tried to change the "width" and "heigt" in the SVG, but that did not help or I did something wrong. I converted them to png, but they are still the same with a bad look. So it has to be the div container scaling.
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.