This question already has answers here:
How can I resize an SVG?
(3 answers)
Closed 11 months ago.
I created a svg component using the svgr playground.
const Logo = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M5.857 18.708c1.638 0 2.995-.36 4.07-1.08 1.075-.721 1.613-1.769 1.613-3.144-.083-1.855-1.464-3.246-4.144-4.173l-1.44-.597c-.314-.1-.538-.198-.67-.298a.45.45 0 0 1-.198-.373c0-.414.273-.62.819-.62.678 0 1.182.347 1.513 1.043l3.698-1.044c-.893-2.22-2.614-3.329-5.162-3.329-1.522 0-2.788.398-3.797 1.193C1.15 7.08.645 8.116.645 9.39c0 .398.058.766.174 1.106.116.34.29.638.521.894.232.257.455.48.67.671.215.19.488.369.82.534.33.166.582.286.756.36.174.075.41.162.707.261l.422.15 1.49.546c.363.133.6.244.707.335a.449.449 0 0 1 .16.36c0 .431-.404.647-1.215.647-1.191 0-1.903-.53-2.134-1.59L0 14.509c.463 2.8 2.416 4.2 5.857 4.2zm11.636 0c1.638 0 2.845-.63 3.623-1.888v1.615h5.112V5.366h-5.112v7.156c0 1.474-.505 2.21-1.514 2.21-1.026 0-1.539-.736-1.539-2.21V5.366h-5.112v7.653c0 3.793 1.514 5.69 4.542 5.69zm16.103-.273V11.28c0-1.475.504-2.212 1.513-2.212 1.026 0 1.54.737 1.54 2.212v7.155h5.111v-7.652c0-3.793-1.513-5.69-4.541-5.69-1.638 0-2.846.63-3.623 1.888V5.366h-5.113v13.069h5.113zm15.383 0V11.28c0-1.475.504-2.212 1.514-2.212 1.025 0 1.538.737 1.538 2.212v7.155h5.113v-7.652c0-3.793-1.514-5.69-4.542-5.69-1.638 0-2.846.63-3.623 1.888V5.366h-5.113v13.069h5.113zM64.958 24l8.289-18.634H67.91l-2.532 6.684-2.258-6.684h-5.584l5.435 11.802L59.944 24h5.014zm13.67-5.292c1.638 0 2.995-.36 4.07-1.08 1.076-.721 1.614-1.769 1.614-3.144-.083-1.855-1.465-3.246-4.145-4.173l-1.44-.597c-.314-.1-.537-.198-.67-.298a.45.45 0 0 1-.198-.373c0-.414.273-.62.819-.62.678 0 1.183.347 1.514 1.043l3.698-1.044c-.894-2.22-2.614-3.329-5.162-3.329-1.522 0-2.788.398-3.797 1.193-1.01.795-1.514 1.83-1.514 3.105 0 .398.058.766.173 1.106.116.34.29.638.522.894.231.257.455.48.67.671.215.19.488.369.819.534.33.166.583.286.757.36.173.075.41.162.707.261l.422.15 1.489.546c.364.133.6.244.707.335a.449.449 0 0 1 .161.36c0 .431-.405.647-1.216.647-1.19 0-1.902-.53-2.134-1.59l-3.723.844c.464 2.8 2.416 4.2 5.857 4.2zm9.8-14.137c.91 0 1.613-.215 2.11-.646.495-.43.744-.977.744-1.64 0-.678-.24-1.23-.72-1.651C90.082.21 89.371 0 88.428 0c-.943 0-1.655.211-2.135.634-.48.422-.72.973-.72 1.652 0 .662.249 1.209.745 1.64.497.43 1.2.645 2.11.645zm2.556 13.864V5.366H85.87v13.069h5.113zm7.74.273c1.737 0 2.977-.63 3.722-1.888v1.615h5.112V.472h-5.112v6.534c-.745-1.275-1.985-1.913-3.723-1.913-1.753 0-3.214.642-4.38 1.926-1.166 1.283-1.75 2.91-1.75 4.882 0 1.97.584 3.598 1.75 4.882 1.166 1.283 2.627 1.925 4.38 1.925zm1.39-3.9c-.729 0-1.312-.274-1.75-.82-.439-.547-.658-1.243-.658-2.087 0-.845.215-1.54.645-2.087.447-.547 1.034-.82 1.762-.82s1.311.273 1.75.82c.438.546.657 1.242.657 2.087 0 .844-.219 1.54-.657 2.087-.439.546-1.022.82-1.75.82zm16.698 3.9c2.597 0 4.624-.754 6.08-2.26l-2.11-2.833c-1.042.845-2.217 1.267-3.524 1.267-.992 0-1.799-.224-2.42-.67-.62-.448-.93-.879-.93-1.293h9.604c.083-.298.124-.687.124-1.167 0-2.054-.674-3.677-2.022-4.87-1.349-1.193-3.073-1.789-5.175-1.789-2.25 0-4.028.671-5.335 2.013-1.307 1.341-1.961 2.956-1.961 4.844 0 1.938.69 3.549 2.072 4.833 1.382 1.283 3.247 1.925 5.597 1.925zm2.208-8.149h-5.112c.033-.613.298-1.08.794-1.404.496-.323 1.084-.484 1.762-.484.678 0 1.266.165 1.762.497a1.7 1.7 0 0 1 .794 1.391z" />
</svg>
);
export default Logo;
The problem is that whenever I try to change the size of the SVG (className="w-32 h-44" for example), only the "container" size changes. The actual content size is static.
You need to have viewBox to make the SVG scalable via classes.
From the devtools I saw the scale of your SVG as 124:24. So keep the same aspect ratio, I used, viewBox="0 0 124 24", where first two zeros specify x/y coord in SVG space.
Runnable Demo: https://codesandbox.io/s/stackoverflow-answer-on-svg-scaling-with-tailwind-css-qwdhzl?file=/src/App.js:24-3260
Tailwind Play: https://play.tailwindcss.com/QAe9s28wfr
const Logo = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 24" {...props}>
<path d="M5.857 18.708c1.638 0 2.995-.36 4.07-1.08 1.075-.721 1.613-1.769 1.613-3.144-.083-1.855-1.464-3.246-4.144-4.173l-1.44-.597c-.314-.1-.538-.198-.67-.298a.45.45 0 0 1-.198-.373c0-.414.273-.62.819-.62.678 0 1.182.347 1.513 1.043l3.698-1.044c-.893-2.22-2.614-3.329-5.162-3.329-1.522 0-2.788.398-3.797 1.193C1.15 7.08.645 8.116.645 9.39c0 .398.058.766.174 1.106.116.34.29.638.521.894.232.257.455.48.67.671.215.19.488.369.82.534.33.166.582.286.756.36.174.075.41.162.707.261l.422.15 1.49.546c.363.133.6.244.707.335a.449.449 0 0 1 .16.36c0 .431-.404.647-1.215.647-1.191 0-1.903-.53-2.134-1.59L0 14.509c.463 2.8 2.416 4.2 5.857 4.2zm11.636 0c1.638 0 2.845-.63 3.623-1.888v1.615h5.112V5.366h-5.112v7.156c0 1.474-.505 2.21-1.514 2.21-1.026 0-1.539-.736-1.539-2.21V5.366h-5.112v7.653c0 3.793 1.514 5.69 4.542 5.69zm16.103-.273V11.28c0-1.475.504-2.212 1.513-2.212 1.026 0 1.54.737 1.54 2.212v7.155h5.111v-7.652c0-3.793-1.513-5.69-4.541-5.69-1.638 0-2.846.63-3.623 1.888V5.366h-5.113v13.069h5.113zm15.383 0V11.28c0-1.475.504-2.212 1.514-2.212 1.025 0 1.538.737 1.538 2.212v7.155h5.113v-7.652c0-3.793-1.514-5.69-4.542-5.69-1.638 0-2.846.63-3.623 1.888V5.366h-5.113v13.069h5.113zM64.958 24l8.289-18.634H67.91l-2.532 6.684-2.258-6.684h-5.584l5.435 11.802L59.944 24h5.014zm13.67-5.292c1.638 0 2.995-.36 4.07-1.08 1.076-.721 1.614-1.769 1.614-3.144-.083-1.855-1.465-3.246-4.145-4.173l-1.44-.597c-.314-.1-.537-.198-.67-.298a.45.45 0 0 1-.198-.373c0-.414.273-.62.819-.62.678 0 1.183.347 1.514 1.043l3.698-1.044c-.894-2.22-2.614-3.329-5.162-3.329-1.522 0-2.788.398-3.797 1.193-1.01.795-1.514 1.83-1.514 3.105 0 .398.058.766.173 1.106.116.34.29.638.522.894.231.257.455.48.67.671.215.19.488.369.819.534.33.166.583.286.757.36.173.075.41.162.707.261l.422.15 1.489.546c.364.133.6.244.707.335a.449.449 0 0 1 .161.36c0 .431-.405.647-1.216.647-1.19 0-1.902-.53-2.134-1.59l-3.723.844c.464 2.8 2.416 4.2 5.857 4.2zm9.8-14.137c.91 0 1.613-.215 2.11-.646.495-.43.744-.977.744-1.64 0-.678-.24-1.23-.72-1.651C90.082.21 89.371 0 88.428 0c-.943 0-1.655.211-2.135.634-.48.422-.72.973-.72 1.652 0 .662.249 1.209.745 1.64.497.43 1.2.645 2.11.645zm2.556 13.864V5.366H85.87v13.069h5.113zm7.74.273c1.737 0 2.977-.63 3.722-1.888v1.615h5.112V.472h-5.112v6.534c-.745-1.275-1.985-1.913-3.723-1.913-1.753 0-3.214.642-4.38 1.926-1.166 1.283-1.75 2.91-1.75 4.882 0 1.97.584 3.598 1.75 4.882 1.166 1.283 2.627 1.925 4.38 1.925zm1.39-3.9c-.729 0-1.312-.274-1.75-.82-.439-.547-.658-1.243-.658-2.087 0-.845.215-1.54.645-2.087.447-.547 1.034-.82 1.762-.82s1.311.273 1.75.82c.438.546.657 1.242.657 2.087 0 .844-.219 1.54-.657 2.087-.439.546-1.022.82-1.75.82zm16.698 3.9c2.597 0 4.624-.754 6.08-2.26l-2.11-2.833c-1.042.845-2.217 1.267-3.524 1.267-.992 0-1.799-.224-2.42-.67-.62-.448-.93-.879-.93-1.293h9.604c.083-.298.124-.687.124-1.167 0-2.054-.674-3.677-2.022-4.87-1.349-1.193-3.073-1.789-5.175-1.789-2.25 0-4.028.671-5.335 2.013-1.307 1.341-1.961 2.956-1.961 4.844 0 1.938.69 3.549 2.072 4.833 1.382 1.283 3.247 1.925 5.597 1.925zm2.208-8.149h-5.112c.033-.613.298-1.08.794-1.404.496-.323 1.084-.484 1.762-.484.678 0 1.266.165 1.762.497a1.7 1.7 0 0 1 .794 1.391z" />
</svg>
);
For more info on SVG scaling check out CSS Tricks article,
https://css-tricks.com/scale-svg/
Adam Wathan (creator of Tailwind CSS) also has a vid on working with SVG: https://www.youtube.com/watch?v=MbUyHQRq2go&list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&index=12
Related
I am working on nuxt 3 with element plus UI. I want to use the custom menu icon on element plus menu item <el-menu-item>
I have tried to import tried to import svg icon from asset folder but it didn't work
Currently
<el-menu-item index="/"><el-icon><Setting /></el-icon>Setting</el-menu-item>
What I want
<el-menu-item index="/"><el-icon><MySettingIcon /></el-icon>Setting</el-menu-item>
Try sth like this:
<el-menu-item class="test" index="1">
<template #title>
<el-icon
:size="iconSize"
color="#77B4F2"
><MySettingIcon/>
</el-icon>
</template>
</el-menu-item>
by importing your component:
components: {
MySettingIcon
}
Or you can use svg icon directly:
<el-menu-item class="test" index="1">
<template #title>
<el-icon
:size="iconSize"
color="#77B4F2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-lightning-fill"
viewBox="0 0 16 16"
>
<path
d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1
.474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7
9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0
1-.48-.641l2.5-8.5z"
/></svg>
</el-icon>
</template>
</el-menu-item>
EDIT
Here is sample MySettingIcon.vue component:
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-emoji-frown"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"
/>
</svg>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "my-setting-icon",
data() {
return {}
},
});
</script>
<style scoped>
.bi-emoji-frown:hover {
background-color: lightcoral;
border-radius: 8px;
}
</style>
You can put this into src/icons folder.
So I'm following this example on CodePen that implements a custom cursor with retina fallbacks. Yet when I remove the class to include it in my "html {" level of the CSS it behaves a little differently, it acts as default or auto cursor not pointer. Which is actually great because I do want to replace the default cursor, but I also want to customise the pointer. Copying both sets of cursor code and defining auto/default and pointer separately doesn't seem to work. If anyone knows how to do this properly and tell me how stupid I'm being that would be great.
TLDR: Would like both auto/default + pointer cursor to be custom.
https://codepen.io/codyhouse/pen/NWRdJoj
html {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ctitle%3Ecursor-link%3C/title%3E%3Cg%3E%3Ccircle cx='32' cy='32' r='30' opacity='.8'%3E%3C/circle%3E%3Cpath d='M30.828 28.172l-.585-.586a2 2 0 0 1 0-2.828l6.171-6.171a2 2 0 0 1 2.828 0l6.171 6.171a2 2 0 0 1 0 2.828l-6.171 6.171a2 2 0 0 1-2.828 0l-.586-.585' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3Cpath d='M33.172 35.828l.585.586a2 2 0 0 1 0 2.828l-6.171 6.171a2 2 0 0 1-2.828 0l-6.171-6.171a2 2 0 0 1 0-2.828l6.171-6.171a2 2 0 0 1 2.828 0l.586.585' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M27 37l10-10'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") 32 32, pointer;
cursor: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAAFGUlEQVR4nO1bS0gcSRj+KwbDLhMRI1kciQQWnFMuu7koHgLi0YsefCCCHuaoCHsQD74O4kEUPc5BD4qPg148quBBEDTJdRkhEAwzQ4LKYIaESKSWv6nqLXu6p19V3TOZ+WBw1O6/6/v7+x9VXU0opVDOeFTW7AHgseoLEEKaAeA1AODPKAD8ZXPKewBIA8AFALyllF4oHZ+KECCEvAEA/on4NJcDgGP8UEqPJQ1RhzQHEEKeAkAfAHQCQIMUo/nIAMA+AGxRSr/KMCjFAYSQOAD0S7jbToGq2KSUJnyP3Y8DCCF/A8C0wjtuB1TENKX0nVcDnhzA5B5nki8GbAFAwktYuHYAIQQz+QLL6sUErBb/UErTyhzASloiwFh3C8wNcTel03EjVALkgY0twcbqCI4cUCLkOVw5wTYEWMxvlgh5ERgO/XY5oaACWLZfKEHywMa8wDhYwi4E4kWY7d2gmXGwhKUDWJNTLHXeD/oYF1NY5gBCyH6IHZ5sZCilnWY2TRXAevvAydfX11ctLi5GU6nUq7Ozs+aRkZFnkkw3ME55yFMASxr7QSc+JH9ychKLxWK/iX/f29u77u7u/ijhElgVOo3tspkC+sIkn0wmv7e2tv47NTX1Cf/X1dX1bHd396WEy0TMcpqZAgKNfSP5tra25NXV1T3+D0NgeXlZIy9JCXm54IEC2EpOUZBHrKysXI+OjmqkJSmhgXHUYQyBN/nnqIEdeYVOCN8BTslzSHaCuQPY5CGQ5Le9vf3SKXkOoxN8lMiIOFESFfDao0FXiMVi1e3t7bW5XO7eKXkOdAKvDgMDA356BJ2r6IBAev66ujrtWcTt7e29kTyGxuHh4Z+rq6svrM4/ODjAeg6NjY1PfAzDVAFRHwYd4/T09Fs6nb6LRqPVk5OTz/l5PC+gOpqamqrN7OExa2trWvzv7Oxc+xiGzlV0gN0TG89A2be0tPzOzx8fH9dkXFtb+xhMkmJvb29evTceMzc399nHkHSueiNECHkrmzgOGhMe3lX8He88kl9fX8+Kx9hVBLdVwwkopVoeUOYAcdCY8DDmUfbsWu/CJA+CA5Q8HLUaNMa8leyDJC9CugL8EMOpcDab/Tk7O/tFNXklIeD3rlJKtZUbzBU1NTVVkUikStWd5w6QtkFChqQHBwc/8BKJ5I+OjrIqyIuQogC/sh8bG2tA8rw6YMm8ubn5mUwm76QxNcBMAe+9GpuYmPjDLlat+n+Mefw5Pz+vd3/YLKkkL3IVHeDqoaKInp4erS8fGhr6aCXXy8vLOzNJY8LjshebJcXQuYpl0PNenFQq9QMJdHR0RPDumR0zPDz8yezvGBqY8PA7yj4gB+hcRQV4zgEbGxtaXz4zM/PCzTSV5wWe8BTLXoTO9cGaICHk2OuaAC5S4Dwdv+O8HaeuhY4PosmxQI5Sqi+KGMug511YuGCJC5f4HRcyCykhRPJg5CjNAeDQCSGTh4IOYPvwMn6sF3JCEZDPGPcamnWC+36vYnQCToKwxIVMHsy4KX00JiZGjhDJO3s0xg7YlHFFVAJWhPPz86/Y7CwtLWVCIg9sY2XeNrrK4/ECJ02rG0/gsORi6QC2/XTrFyC/VWgrrd16QMLPHKEIcME4WKKyTc7OCjMQZwZLBXzLrO0U39GSGNt7WypOcLVf2PGaYIk4Qd1mafjfCf1FmhgvWMy7GlvlhYnKKzOVl6Yqr83JsPPQaDm+OGl5gXJ8dbaUUN5vjwPAfz2vBz0d3cIRAAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAABYlAAAWJQFJUiTwAAAKZ0lEQVR4nO2dTWgUSRTHq9ZFUEZZiCwYNyAszHgQXTfmoAeNKDmZix4kAZUczIIHg+6e9LDxoCcXiQfBeAgiJHjQS+IlKCYnQc2KH7DMgCBEE1gMCBkUhKWWl7zWnp7unuru+uqu+sGwJpntqan/v6tevaquoowx4rCX75z2duMMYDnOAJbzfRG/PqW0kxBSIYSUCCG78ddl/JmHOiGkhu97hj9XGWNzer6RPHIfBFJK2wkhnfgq40smNXyBGeYYYwt6ayAbuTQApbQbBYf/btZcnEVCyAyaYUZzWRKTGwNQSuHO7sUXb1OuGugqJuHFGKuZVbRwjDYApXQD3uV9Cpp20YABJqB1YIwtm1pIIw2AwoPo/Qbf7bxAqzAOZjDRCEYZoGDCBzHSCMYYgFI6WFDhg6wYgTE2akJhtBsAx+zDBkTzqoHRw7Du3II2A2BzD8Lv11IAc5hFI2jpFrSkgnEcP+nEXwHqYBLrRDlKWwC86wcx0HM0A8PGUZWtgTIDYMr2Sg7H86qB/MEfqlLMSroADPTGnfhcQB2NY51JR7oBKKWQur1hwfBOJFBXN7DupCK1C8Cx/aDiyisaozJzBtIMQCmFId5hKRe3jynG2LCMby2lC3DiC+cw1qlwhBvAiS8NKSYQagDs85348jiMdSwMYQbAiNUFfPIZFDk6EBIE4pj1hpASOXj5TcREUmYDYIZv3I3zlQPTyv1ZM4aZugDM7V9x4msB6vwKapCarDHAoEvvaqWcNe5KbQCcvnSzevrpyzKVnCoGwGZn0jX9xgDxQG+aaeS0LcCwE98oSqhJYhIbAId8biWPeexPM4WcuAuglE5auIAzLywyxhIliRK1AJiGtEr8SqWy9u7du1uXl5d/YYx1wuvBgwc/Hz9+/AcDihdkc9JUMXcLYGPgd+bMmbaRkZGtUX+/d+/e0tGjR9+qLVVLEgWESVqAPid+I0eOHGmD1kFD8eIoJRmecxkA7/5+GaU1ER7xPQw1QT9vhpC3BbDm7o8Sf2xs7N+9e/f+MzQ09LZer//n/5uBJuBuBVrGADb1/VHig+jXrl1b8n7es2fP+unp6XKpVFrjf59hMQFXLMDTAnQ78b+JDzx+/PhTT09PzfCWoITaxcJjgMLn+5OI75ETE7TULtYAuC1LoWf70ojvkQMTlFHDSFq1ANIfTNBJFvE9cmCCWA2tNYAI8T0MN0E6A+AccyGDP5HiexhsglLceoG4FkDJw4mqkSG+h8EmiNQyzgBaNiyQiUzxPQw1QbIWAFf6FmrWT4X4HgaaYDNq2kRUC1Co5n/Tpk1rLl261BH8vQzxPeJMoGkqOVRTKwxw+vTptmDaVqb4HlEmOHnyZJvMz40gkQEKlfzZt29fw8zYw4cPP8oW3wNMcOHChXn/7w4ePKijBQjVNOq8gEIZYOPGjQ13/8uXLz/z/r/QXO/atWs9WTXO8v379xOvvH369Cn350mEzwCq9qZRyevXrz93dXV9bQWOHTvWdu7cuZaPVIUFjmkMcOrUqYYmP9glqAK0DT5PGNYFVHQUTiaPHj1qEK29vX1tq2g8yaKQVtcZGBj40f+76enpj+prYYUmbcMMULjs3+3btz9Wq9WGZhii8aj3R4n//PnzT0k+N+o658+f13XKSJO2YQbYHfK73DMwMNC0kieMuHwBGIm3HuKuU61Wv2iqzyZtC3FoFIzzYai3c+fO9R0dHWuhz4dm3y+YNyQbGRn5Keo6opJFKpNOWWlaEkYpnclTNwCVDUme4DgfgGYf7nwQn+c6FohfZ4w1pIXDDPBMdanSwhOoQbMPd36cCWy68xljDd1Abg+O5I3SoWVwzX40uTRAVGVDhu/q1auLCwsLXEGW7eKTPBogrrIPHTr0BhI8W7ZseQVLtNNexxbxSd5iANNEy6P4uY0BnPhyyIUBdIj25MmTsvc4eDBtXBTxSR4SQSbcsZA2fv/+/YY7d+4s7dixY13YdG4exSemG8Ck5homkM6ePRu6TC6v4hOTuwDd4g8NDb3jmTvIs/gkwgB1DeVowIQ735s7CM4ieoA5cih+k7Zhw0A4nuRXlaXyoyvg8/39XTBtDKuCDhw4sGH79u3r5ufnv7x48eLT9evXlz58+KBlYUcG/maMNewhZJQBdN35EOl7/+aZO8gxTQYI6wK0JIJgNy4R4sPdmuU6MHcwNjZm2pYvomjS1pgY4PLly00PLqTpY70FnEmuE0wbVyqVdYZuA5eVJm3DDFDVUbKenp6GCoc9eUQEWDwmgm1dghNI0Odn/WwDadK2KQ8Aq0YppcqLHlzQcfPmzVTiw9Jt79+who93GRckefzjfAj40ny+yYSdMBKVCKrpfjagq6trXZpADJZtp1m6DRk+/88Q7Se9huHUwooXlQgKfbNMYC7ff3lY5gW7can4bBg1BNO7MNRT9NVVkcgAmQ8jSsqtW7camnzoEmArNtkmCBsywlAQxvkyP1cDoZoaYwDoq4PRuGwTROUL4Fm+HCZ5WsFvADyJalF1CSEaV2WCIk3pcrAYdbpY3GTQjI6SqjCBZeKTOC3jDKC8G/CQaQILxSdxWkYagDE2o3NmUIYJLBW/jlqG0mo9wKT88kUj0gSWik9aaWi0AYggE1gsPslkAMZYTUdSKEgWE1gufg01jIRnSdiE3DLykcYElotPeLTjMYDWYNBPEhM48Vc0azmU5zo1DI8iy3RIsUhgnX5whw9I30IGDzZkgj15gtuyELvEB0YZY6Ot3sRrAOOOjQkzQRyWic99dBzXsnC80LiQogkirDuIwjLxgXEZ5wZOmBILePCYwELx60kCd24DmNgKEDTBiRMn3vjXE0A8AMbYtm3bK8vEJ0nufuIOjy4ccg+PRlKdU+9QQmJtEhsAFxbOOj2NYzZs0WcrEncBxNKTxA0n0YnhflI9HYwf5LoCcxhOIz7J8ng4zjEbMU9gORNx8/2tyLo/wKgJs4UWU0MNUpMqBvCDhxGNu3hAOdDv90ct9uQl8w4hWIDfTa6pgvJ7VvGJqC1icPhxsaAVbSIX0wz5whC2RxBjbDJrf+TgYhTrWghCN4nC+ecpp6M0pnjm+JMgfJcwxtiwM4EUprBuhSJlmzhnAuFIEZ+IGAbGXtywpWQ5hWtpV1qkGoCsmgCmJ//MbfXr5aLIgC8M6QYg3w6j/Msli7ip4zhf+vOZSraKxS/S79LGXNQww6fk4VwlLcDXD1udRoaYoE/Zh+aLCezzU83spUGpATwopd04ney6hFXqOKWrfE8GLbuF4xftdSuLVpjFxRxaNuTQ0gI0FGA1QBy2cKHpIt712jbiICYYwANzBv0WdAt1XLptxLyJMQYg34LEvoIaoY7rJiZUBnmtMMoAHgUzgpHCexhpAA80QjeaQevWtSmo4bBuxkThPYw2gB9KaRlHDr0Gtwp1XC4/2WpnDlPIjQH8YB6hE1sH3aOHRdyIYU7XUC4LuTSAH1yU2omvsoKuwts3aQ5Fz7wuTye5N0AYmFuoYFfhnZVbTtB11H3zFs/w56ruMbsMCmkABz+5Oz7eIRZnAMtxBrAZQsj/XTPwu1JSUeoAAAAASUVORK5CYII=") 2x) 32 32, pointer;
}
I train my CSS by making models of site or others already created. Currently, I am training with media queries and I have a problem is that it does not apply.
Before posting this message I created a simple page with a div containing two to see how the breakpoints worked and I got there but on this page I can't.
Could you tell me why nothing is happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
margin: 0 auto;
background: linear-gradient(hsl(273, 75%, 66%), hsl(240, 73%, 65%));
font-family: "Kumbh Sans", sans-serif;
font-weight: 400;
font-size: 14px;
}
p {
width: 350px;
color: hsl(237, 12%, 33%);
font-size: 12px;
margin-bottom: 15px;
padding-top: -7px;
}
h1 {
font-weight: 700;
color: hsl(238, 29%, 16%);
margin-bottom: 15px;
font-size: 31px;
letter-spacing: 2px;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
background-color: white;
border-radius: 23px;
display: flex;
justify-content: space-around;
align-items: center;
width: 920px;
height: 510px;
overflow: hidden;
margin-right: 191px;
}
.leftSide {
width: 100%;
display: flex;
}
.svgCube {
position: relative;
left: 60px;
top: 45px;
z-index: 800;
}
.svgWoman {
display: block;
position: relative;
right: 85px;
}
.rightSide {
display: flex;
flex-direction: column;
width: 100%;
background-color: transparent;
margin-top: -20px;
margin-left: 3px;
}
.hiddenElement {
display: none;
}
.divider {
width: 335px;
border-bottom: 1px solid hsl(240, 5%, 91%);
}
.btnFaq {
width: 335px;
font-family: "Kumbh Sans", sans-serif;
font-weight: 400;
font-size: 14px;
background-color: white;
border: none;
color: hsl(237, 12%, 33%);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding-top: 22px;
padding-bottom: 15px;
}
.btnFaq:hover {
color: hsl(14, 88%, 65%);
}
#media only screen and (min-with: 300px) and (max-with: 850px) {
.container {
flex-direction: column;
}
.box {
flex-direction: column;
flex-wrap: wrap;
width: 80vw;
height: 60vh;
}
}
</style>
<title>Frontend Mentor | FAQ Accordion Card</title>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
<script src="main.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<svg class="svgCube" width="191" height="184" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-97.9%" y="-76.3%" width="295.8%" height="313.7%" filterUnits="objectBoundingBox" id="a">
<feOffset dy="25" in="SourceAlpha" result="shadowOffsetOuter1" />
<feGaussianBlur stdDeviation="25" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
<feColorMatrix values="0 0 0 0 0.209139076 0 0 0 0 0.0691446444 0 0 0 0 0.478091033 0 0 0 0.497159091 0" in="shadowBlurOuter1" />
</filter>
<path id="b" d="M0 27.756v53.87l41.968 24.035 47.387-28.025v-53.87" />
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(50.93 2.125)">
<use fill="#000" filter="url(#a)" xlink:href="#b" />
<use fill="#FF9271" xlink:href="#b" />
</g>
<path fill="#DF5C34" fill-rule="nonzero" d="M92.899 53.917v53.87l47.387-28.026v-53.87z" />
<path fill="#F47B56" fill-rule="nonzero" d="M50.93 29.88L99.624 2.126l40.662 23.767-47.387 28.025z" />
<path d="M94.013 14.49a25.942 25.942 0 0114.207 3.129c2.486 1.462 3.844 2.988 4.036 4.579.192 1.59-.628 2.975-2.562 4.143a9.115 9.115 0 01-2.985 1.18c-.869.205-1.76.295-2.652.269l-.974-.077c.091.217.151.446.18.68a3.132 3.132 0 01-.513 1.552 5.704 5.704 0 01-2.1 2.065 12.633 12.633 0 01-6.7 1.77 13.247 13.247 0 01-6.957-1.757c-1.999-1.18-3.023-2.566-3.1-4.156a4.49 4.49 0 012.562-4.015 8.488 8.488 0 012.357-1.013 9.175 9.175 0 012.037-.346h.705l-1.282-.77 3.6-2.244 8.34 4.912a4.377 4.377 0 004.15 0c1.769-1.103 1.137-2.552-1.895-4.348a19.261 19.261 0 00-10.556-2.347 21.67 21.67 0 00-11.018 3.168c-3.023 1.89-4.522 4.143-4.496 6.76 0 2.564 1.601 4.848 4.714 6.682a21.015 21.015 0 0011.146 2.655 20.926 20.926 0 0011.017-2.925 12.353 12.353 0 003.062-2.565 5.683 5.683 0 001.28-2.18l.18-.808 4.753.269c.008.145.008.29 0 .436a8.216 8.216 0 01-.346 1.154 8.303 8.303 0 01-.82 1.72 11.912 11.912 0 01-1.69 2 15.952 15.952 0 01-2.755 2.13 25.602 25.602 0 01-9.326 3.36 35.176 35.176 0 01-10.877.192 24.896 24.896 0 01-9.339-3.053 12.127 12.127 0 01-5.304-5.566 8.192 8.192 0 010-6.593 12.692 12.692 0 015.266-5.759 28.966 28.966 0 0114.655-4.284zm4.663 13.262c-.17-.891-.77-1.64-1.601-2.001a6.579 6.579 0 00-3.33-.911 5.619 5.619 0 00-3.101.795 2.283 2.283 0 00-1.281 2.001c.117.89.69 1.654 1.512 2.014a6.54 6.54 0 003.394.86 6.092 6.092 0 003.254-.847 2.065 2.065 0 001.205-1.911" fill="#3E2928" fill-rule="nonzero" />
</g>
</svg>
<div class="box">
<div class="leftSide">
<svg class="svgWoman" width="472" height="359" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="61.181%" y1="36.82%" x2="40.788%" y2="55.54%" id="a">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="82.186%" y1="28.519%" x2="29.852%" y2="62.464%" id="b">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="80.66%" y1="21.864%" x2="21.557%" y2="66.62%" id="c">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
<linearGradient x1="81.016%" y1="60.589%" x2="67.462%" y2="55.277%" id="d">
<stop stop-color="#FFF" stop-opacity="0" offset="0%" />
<stop stop-color="#DC841E" offset="99%" />
</linearGradient>
<linearGradient x1="82.183%" y1="27.537%" x2="29.857%" y2="62.324%" id="e">
<stop stop-color="#78B46A" offset="0%" />
<stop stop-color="#7F3500" offset="3%" />
<stop stop-color="#FFF" offset="100%" />
</linearGradient>
</defs>
<g fill-rule="nonzero" fill="none">
<path d="M229.018 355.203L9.313 225.211c-6.995-3.938-12.99-10.39-6.175-14.622L223.625 83.367c3.305-2.052 8.327-3.399 11.696-1.437l230.595 134.007c6.994 4.066 8.25 15.392 1.28 19.496L257.972 354.998a29.178 29.178 0 01-28.953.205z" fill="#5B36A0" />
<path d="M229.018 349.203L9.313 219.211c-6.995-3.938-12.99-10.39-6.175-14.622L223.625 77.367c3.305-2.052 8.327-3.399 11.696-1.437l230.595 134.007c6.994 4.066 8.25 15.392 1.28 19.496L257.972 348.998a29.178 29.178 0 01-28.953.205z" fill="#6862E6" />
<path d="M247.133 177.693L203.78 202.46s66.783 40.8 80.439 46.546l24.968-35.913" fill="url(#a)" opacity=".25" style="mix-blend-mode: multiply" />
<path d="M232.157 296.513l-43.365-24.715-43.364 24.767s22.585 13.8 44.171 26.473c13.708-9.71 27.428-19.521 42.558-26.525z" fill="url(#b)" opacity=".25" style="mix-blend-mode: multiply" />
<path d="M138.728 143.883l-27.505 15.712s2.331 14.404 15.988 20.15l36.01-23.087" fill="url(#c)" opacity=".46" style="mix-blend-mode: multiply" />
<ellipse fill="#68E1FD" cx="152.192" cy="147.898" rx="16.59" ry="11.697" />
<ellipse fill="#974C26" cx="152.179" cy="140.997" rx="12.426" ry="5.092" />
<path d="M151.73 132.506c0-2.296-.076-4.591-.256-6.887-.051-.599-.106-1.193-.166-1.783l-.128-1.167c0-.347-.18-1.283-.18-1.193-.077-.47-.158-.936-.243-1.398a54.855 54.855 0 00-8.865-21.715 31.778 31.778 0 00-2.473 12.71c0 1.284.103 2.566.205 3.772v.757c.103.615.218 1.282.346 1.846a50.222 50.222 0 001.96 6.888 41.928 41.928 0 002.678 6.003 82.454 82.454 0 003.676 6.349 90.88 90.88 0 002.985 4.425c.308-2.86.449-5.734.461-8.607zm-6.52-25.819a2.067 2.067 0 000-.897c.316.324.628.658.935 1a2.84 2.84 0 00-.948-.103h.013z" fill="#999A1C" />
<path d="M155.996 134.276a65.015 65.015 0 003.498-5.938c.282-.53.555-1.06.82-1.59l.525-1.065.5-1.103.55-1.283a54.876 54.876 0 004.266-23.087 31.728 31.728 0 00-8.967 9.363 45.938 45.938 0 00-1.858 3.284l-.256.474-.064.206c-.243.577-.487 1.154-.717 1.744a50.22 50.22 0 00-2.063 6.862 41.95 41.95 0 00-.986 6.503 77.621 77.621 0 00-.333 7.323c0 1.911 0 3.656.115 5.336 1.704-2.27 3.42-4.605 4.97-7.029zm8.456-25.254c.2-.226.349-.493.435-.783.094.445.175.873.244 1.283-.2-.2-.43-.368-.68-.5z" fill="#999A1C" />
<path d="M155.907 139.997a64.687 64.687 0 003.843-2.078l.96-.59.629-.398.615-.436.717-.526a34.464 34.464 0 009.736-11.069 19.928 19.928 0 00-7.84 2.168c-.705.36-1.384.757-2.063 1.167l-.294.18-.103.09-.948.705a31.541 31.541 0 00-3.33 3.04 26.351 26.351 0 00-2.627 3.193 83.516 83.516 0 00-2.562 3.848 55.792 55.792 0 00-1.653 2.925c1.653-.693 3.306-1.411 4.92-2.22zm12.708-10.902a1.28 1.28 0 00.487-.283c-.094.274-.196.543-.308.808a1.797 1.797 0 00-.179-.513v-.012zM151.73 132.506c0-2.296-.076-4.591-.256-6.887-.051-.599-.106-1.193-.166-1.783l-.128-1.167c0-.347-.18-1.283-.18-1.193-.077-.47-.158-.936-.243-1.398a54.855 54.855 0 00-8.865-21.715 31.778 31.778 0 00-2.473 12.71c0 1.284.103 2.566.205 3.772v.757c.103.615.218 1.282.346 1.846a50.222 50.222 0 001.96 6.888 41.928 41.928 0 002.678 6.003 82.454 82.454 0 003.676 6.349 90.88 90.88 0 002.985 4.425c.308-2.86.449-5.734.461-8.607zm-6.52-25.819a2.067 2.067 0 000-.897c.316.324.628.658.935 1a2.84 2.84 0 00-.948-.103h.013z" fill="#999A1C" />
<path d="M155.996 134.276a65.015 65.015 0 003.498-5.938c.282-.53.555-1.06.82-1.59l.525-1.065.5-1.103.55-1.283a54.876 54.876 0 004.266-23.087 31.728 31.728 0 00-8.967 9.363 45.938 45.938 0 00-1.858 3.284l-.256.474-.064.206c-.243.577-.487 1.154-.717 1.744a50.22 50.22 0 00-2.063 6.862 41.95 41.95 0 00-.986 6.503 77.621 77.621 0 00-.333 7.323c0 1.911 0 3.656.115 5.336 1.704-2.27 3.42-4.605 4.97-7.029zm8.456-25.254c.2-.226.349-.493.435-.783.094.445.175.873.244 1.283-.2-.2-.43-.368-.68-.5z" fill="#999A1C" />
<path d="M155.907 139.997a64.687 64.687 0 003.843-2.078l.96-.59.629-.398.615-.436.717-.526a34.464 34.464 0 009.736-11.069 19.928 19.928 0 00-7.84 2.168c-.705.36-1.384.757-2.063 1.167l-.294.18-.103.09-.948.705a31.541 31.541 0 00-3.33 3.04 26.351 26.351 0 00-2.627 3.193 83.516 83.516 0 00-2.562 3.848 55.792 55.792 0 00-1.653 2.925c1.653-.693 3.306-1.411 4.92-2.22zm12.708-10.902a1.28 1.28 0 00.487-.283c-.094.274-.196.543-.308.808a1.797 1.797 0 00-.179-.513v-.012z" fill="#999A1C" />
<path d="M264.35 168.022l-23.994 11.543a5.53 5.53 0 00-.384 9.76l56.867 33.22a5.518 5.518 0 007.43-1.782l13.823-21.523" fill="#A1482D" />
<path d="M394.854 112.344L203.524 1.962a8.626 8.626 0 00-8.626.01 8.644 8.644 0 00-4.312 7.48v114.833a7.184 7.184 0 003.587 6.22L398.146 248.39a4.62 4.62 0 004.632.003 4.631 4.631 0 002.312-4.018V130.018a20.398 20.398 0 00-10.236-17.674z" fill="#F47B56" />
<path d="M203.537 10.646l185.552 106.88a13.034 13.034 0 016.52 11.286v86.076a4.708 4.708 0 01-2.344 4.065 4.697 4.697 0 01-4.688.014L199.348 110.304a4.643 4.643 0 01-2.331-4.027V14.429c0-1.555.827-2.992 2.171-3.772a4.351 4.351 0 014.35-.011z" fill="#FFF" />
<ellipse fill="#AB643C" transform="rotate(-10.9 280.738 168.465)" cx="280.738" cy="168.465" rx="4.036" ry="4.617" />
<path fill="url(#d)" opacity=".32" d="M253.41 127.427l86.23 51.869 42.595-24.793-76.109-44.353" />
<path d="M359.97 117.102l-93.224-56.91a3.225 3.225 0 00-3.278.028 3.233 3.233 0 00-1.565 2.884V95.53a3.4 3.4 0 001.627 2.924l93.212 55.704c.997.567 2.22.56 3.21-.02a3.22 3.22 0 001.594-2.79l.487-30.23a4.542 4.542 0 00-2.063-4.015z" fill="#E2AC00" />
<path d="M337.667 133.789c3.343 4.681 9.223 5.99 13.118 2.937 3.894-3.053 4.343-9.324 1-13.993-3.345-4.669-9.225-5.99-13.12-2.937-3.894 3.052-4.342 9.311-.998 13.993z" fill="#FFF" />
<path d="M328.52 111.318l-38.023-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.402 1.91l38.022 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91zM326.957 120.63l-52.41-31.591a1.45 1.45 0 00-1.396 2.488l52.345 31.603a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91v-.013z" fill="#F2F2F2" />
<path d="M341.369 123.387L248.196 66.49a3.225 3.225 0 00-3.278.028 3.233 3.233 0 00-1.565 2.884v32.411a3.4 3.4 0 001.615 2.938l93.211 55.703c1.008.58 2.25.57 3.248-.025a3.22 3.22 0 001.569-2.848l.487-30.23a4.542 4.542 0 00-2.114-3.964z" fill="#F47B56" />
<path d="M319.065 140.074c3.344 4.681 9.224 5.99 13.119 2.937 3.894-3.053 4.342-9.325.999-13.993-3.344-4.67-9.224-5.99-13.118-2.938-3.895 3.053-4.343 9.312-1 13.994z" fill="#FFF" />
<path d="M309.918 117.602l-38.048-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.402 1.91l38.022 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.401-1.91h.025zM308.343 126.978l-52.397-31.642a1.447 1.447 0 00-1.862.579 1.45 1.45 0 00.402 1.91l52.409 31.59a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91l-.012.051z" fill="#F2F2F2" />
<path d="M317.99 127.21l-93.2-56.897a3.225 3.225 0 00-3.278.027 3.233 3.233 0 00-1.564 2.884v32.412a3.4 3.4 0 001.627 2.924l93.211 55.704c1.008.58 2.25.57 3.249-.026a3.22 3.22 0 001.568-2.847l.487-30.231a4.542 4.542 0 00-2.1-3.95z" fill="#68E1FD" />
<path d="M317.99 127.21l-93.2-56.897a3.225 3.225 0 00-3.278.027 3.233 3.233 0 00-1.564 2.884v32.412a3.4 3.4 0 001.627 2.924l93.211 55.704c1.008.58 2.25.57 3.249-.026a3.22 3.22 0 001.568-2.847l.487-30.231a4.542 4.542 0 00-2.1-3.95z" fill="#68E1FD" />
<path d="M295.673 143.896c3.343 4.681 9.224 5.99 13.118 2.937 3.895-3.053 4.343-9.325 1-13.993-3.344-4.669-9.225-5.99-13.119-2.937-3.894 3.052-4.304 9.311-1 13.993z" fill="#FFF" />
<path d="M286.526 121.425l-38.035-22.92a1.447 1.447 0 00-1.862.578 1.45 1.45 0 00.401 1.91l38.023 22.92a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91h.013zM284.95 130.75l-52.409-31.592a1.447 1.447 0 00-1.862.579 1.45 1.45 0 00.402 1.91l52.409 31.59a1.447 1.447 0 001.862-.578 1.45 1.45 0 00-.402-1.91z" fill="#F2F2F2" />
<path d="M195.672 124.028a45.406 45.406 0 00-13.208 19.38c-4.638 12.827 6.956 33.784 6.956 33.784l18.038-14.3" fill="#FF8F6F" />
<path d="M193.724 293.602l-4.893-2.706 1.28-7.003s7.29.692 7.93 3.283" fill="#003B94" />
<path d="M195.518 293.5c1.102-.68 2.255-1.283 3.395-1.886 2.83-1.552 6.918-3.155 8.66-6.067a3.39 3.39 0 00-.23-3.848c-2.563-3.104-8.174 2.001-11.044-1.436-.563-.68-.832-11.467-.832-11.467l-10.915 2.95s-1.845 21.676-1.64 23.01c.205 1.334 3.959 2.566 3.959 2.566a9.666 9.666 0 003.151-1.283c1.14-.834.102-11.005 1.563-9.581 1.46 1.424 2.1 6.99 2.1 6.99.607.092 1.222.11 1.833.051z" fill="#F47B56" />
<path d="M214.568 304.08l-4.894-2.667 1.28-7.003s7.29.693 7.93 3.283" fill="#003B94" />
<path d="M216.412 303.978c1.102-.68 2.255-1.282 3.395-1.885 2.831-1.552 6.918-3.155 8.66-6.067a3.39 3.39 0 00-.23-3.848c-2.563-3.104-8.174 2.001-11.043-1.436-.564-.68-.833-11.467-.833-11.467l-10.915 2.95s-1.857 21.753-1.652 23.036c.205 1.282 3.958 2.565 3.958 2.565a9.666 9.666 0 003.152-1.283c1.14-.833.102-11.004 1.563-9.58 1.46 1.423 2.1 6.99 2.1 6.99a7.498 7.498 0 001.845.025z" fill="#F47B56" />
<path d="M179.005 233.614l-3.216 43.058s5.125 7.08 22.304 3.142l.166-29.026M198.849 242.144c-.372 3.706 0 44.596 0 44.596s4.752 8.901 25.442 0l-.295-34.746" fill="#3E2928" />
<path d="M177.403 247.838c1.41.975 1.896-4.04 3.37-3.18a83.77 83.77 0 0016.961 7.49h.128a1.165 1.165 0 011.576.577 89.585 89.585 0 0011.133 2.565c4.83.77 8.826-2.808 13.784-3.052 0-19.008.09-73.109-7.994-84.652l-23.918-8.055c-.115 1.975-11.606 15.314-11.325 31.578.32 18.328-2.062 35.618-2.472 41.351-.064.975-1.191 14.34-1.243 15.378z" fill="#3E2928" />
<path d="M218.564 145.73l-2.203 21.804s-17.845.719-25.532-4.591v-18.496" fill="#FF8F6F" />
<path d="M241.252 131.378l-1.819 2.488c.97-2.024 1.826-4.1 2.562-6.22.513-1.45-1.806-2.027-2.318-.578l-.27.744c.223-.77.432-1.543.628-2.322a1.195 1.195 0 10-2.319-.577 62.236 62.236 0 01-1.806 5.952 42.54 42.54 0 00.846-5.26c.154-1.525-2.242-1.461-2.383 0a37.916 37.916 0 01-1.076 5.965c0-.684-.064-1.368-.192-2.052a1.206 1.206 0 00-.5-.86 9.29 9.29 0 00-.23-.795 1.204 1.204 0 00-2.345.36l-.154 8.978c-.433.93-.999 1.795-1.678 2.565a41.64 41.64 0 013.331 2.565 34.337 34.337 0 012.716 2.565 65.716 65.716 0 002.216-2.924c.088-.075.166-.161.23-.257a255.44 255.44 0 016.611-9.337c.948-1.052-1.14-2.219-2.05-1z" fill="#FFB5A9" />
<path d="M207.24 125.85s8.43 2.27 11.85 7.695a96.553 96.553 0 015.65 11.66l6.225-9.685s7.559 2.322 10.556 6.042c0 0-8.967 19.623-16.782 21.304-7.814 1.68-16.116-11.518-16.116-11.518s-1.716 5.515-1.383-.372" fill="#FF8F6F" />
<path d="M212.595 146.82a17.097 17.097 0 01-5.342-7.618c-1.013-3.45.256-6.478 1.434-9.684a31.237 31.237 0 002.204-9.966c.102-3.36-.282-6.72-.513-10.069a.976.976 0 010-.436c-1.127-3.783-3.433-6.99-7.98-7.375-11.774-1-12.44 12.057-12.35 17.367.09 5.31.653 8.901-3.254 11.12-3.908 2.219-6.726 8.042-2.998 12.75 3.728 4.706.384 2.988-2.101 7.169-2.485 4.181-1.845 9.402 3.254 11.287 5.099 1.885 28.799-1.655 30.976-3.848a4.531 4.531 0 001.115-3.206 12.444 12.444 0 00-4.445-7.49z" fill="#007F68" />
<path d="M224.176 39.132a18.805 18.805 0 013.33 9.748 6.419 6.419 0 01-1.088 4.553 2.624 2.624 0 01-3.178.552 4.906 4.906 0 01-1.716-1.154 5.989 5.989 0 01-1.102-1.398l-.307-.603a2.13 2.13 0 01-.308.436 2.24 2.24 0 01-1.05.449 3.186 3.186 0 01-1.896-.231 7.113 7.113 0 01-3.357-3.014 9.692 9.692 0 01-1.486-4.861 4.775 4.775 0 011.192-3.848 2.739 2.739 0 013.113-.488c.513.205.986.5 1.396.873.35.297.659.637.922 1.013l.23.41v-1.141l2.563 1 .256 7.209c.018.516.178 1.017.462 1.449.24.417.609.745 1.05.936 1.238.488 1.81-.581 1.717-3.206a13.889 13.889 0 00-2.473-7.247 12.136 12.136 0 00-5.675-4.848 4.774 4.774 0 00-5.33.68 7.252 7.252 0 00-2.062 5.925 15.3 15.3 0 002.562 7.696 11.817 11.817 0 005.47 5.13c.812.34 1.684.51 2.563.5a3.417 3.417 0 001.665-.307l.513-.283 1.55 2.886-.257.18a6.133 6.133 0 01-.755.359c-.41.177-.84.298-1.282.36a6.398 6.398 0 01-1.703 0 8.575 8.575 0 01-2.165-.552 14.093 14.093 0 01-5.125-3.771 22.36 22.36 0 01-3.971-6.208 19.027 19.027 0 01-1.64-6.888c-.138-2 .27-3.999 1.179-5.784a6.51 6.51 0 013.638-3.207 7 7 0 015.047.257 16.288 16.288 0 017.508 6.438zm-5.65 9.12c.42-.538.61-1.221.525-1.899a4.904 4.904 0 00-.679-2.372 3.255 3.255 0 00-1.55-1.411 1.395 1.395 0 00-1.576.205 2.35 2.35 0 00-.563 1.86c.029.846.28 1.669.73 2.385.37.652.94 1.165 1.627 1.463a1.28 1.28 0 001.486-.231M375.433 178.013a18.74 18.74 0 013.33 9.748 6.419 6.419 0 01-1.088 4.553 2.637 2.637 0 01-3.177.552 5.047 5.047 0 01-1.717-1.154 6.207 6.207 0 01-1.102-1.399l-.307-.602c-.087.156-.19.302-.308.436-.304.24-.666.395-1.05.449a3.071 3.071 0 01-1.883-.218 7.113 7.113 0 01-3.357-3.027 9.653 9.653 0 01-1.499-4.874 4.724 4.724 0 011.192-3.848 2.726 2.726 0 013.1-.487c.514.204.987.499 1.396.872.35.302.66.647.923 1.026l.243.41v-1.141l2.562.987.257 7.209c.022.515.181 1.015.46 1.449.242.417.61.745 1.051.936 1.281.488 1.807-.577 1.73-3.206a13.953 13.953 0 00-2.473-7.26 12.161 12.161 0 00-5.662-4.835 4.787 4.787 0 00-5.33.667 7.252 7.252 0 00-2.01 5.964 15.25 15.25 0 002.561 7.695 11.868 11.868 0 005.535 4.964 6.668 6.668 0 002.562.513 3.545 3.545 0 001.665-.308l.513-.282 1.55 2.886-.256.18a6.133 6.133 0 01-.756.359c-.412.17-.842.29-1.281.359a6.526 6.526 0 01-1.717 0 8.55 8.55 0 01-2.152-.564 14.093 14.093 0 01-5.125-3.759 22.41 22.41 0 01-3.97-6.22 18.988 18.988 0 01-1.64-6.888 11.003 11.003 0 011.178-5.772 6.562 6.562 0 013.638-3.219 7.09 7.09 0 015.06.257 16.315 16.315 0 017.354 6.592zm-5.65 9.12a2.567 2.567 0 00.538-1.899 4.865 4.865 0 00-.691-2.372 3.204 3.204 0 00-1.538-1.411 1.395 1.395 0 00-1.575.192 2.323 2.323 0 00-.577 1.86c.03.842.281 1.66.73 2.373.369.655.94 1.172 1.627 1.475a1.28 1.28 0 001.486-.218" fill="#F47B56" />
<path d="M120.139 232.704L76.774 208l-43.351 24.754s24.122 15.083 45.709 27.756c13.707-9.697 25.89-20.791 41.007-27.807z" fill="url(#e)" opacity=".25" style="mix-blend-mode: multiply" />
</g>
</svg>
</div>
<div class="rightSide">
<h1>FAQ</h1>
<button onclick="toggleElement('btnFaq1')" class="btnFaq" id="btnFaq1">
How many team members can I invite?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide1" class="hiddenElement">
You can invite up to 2 additional users on the Free plan. There is
no limit on team members for the Premium plan.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq2')" id="btnFaq2" class="btnFaq">
What is the maximum file upload size?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide2" class="hiddenElement">
No more than 2GB. All files in your account must fit your allotted
storage space.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq3')" id="btnFaq3" class="btnFaq">
How do I reset my password?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide3" class="hiddenElement">
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq4')" id="btnFaq4" class="btnFaq">
Can I cancel my subscription?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide4" class="hiddenElement">
Yes! Send us a message and we’ll process your request no questions
asked.
</p>
<div class="divider"></div>
<button onclick="toggleElement('btnFaq5')" id="btnFaq5" class="btnFaq">
Do you provide additional support?
<svg class="iconButton" width="10" height="7" xmlns="http://www.w3.org/2000/svg">
<path d="M1 .799l4 4 4-4" stroke="#F47B56" stroke-width="2" fill="none" fill-rule="evenodd" />
</svg>
</button>
<p id="textRightSide5" class="hiddenElement">
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</p>
<div class="divider"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Refer the jsFiddle: https://jsfiddle.net/zqh3ra0u/2/
Read your code more attentively before asking, you wrote with instead of width in the #media rule.
I am trying to make stroke width thinner but it is not working. I have tried stroke-width but didn't work.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g stroke="black" fill="#3F474E" stroke-width="0.2">
<path d="m488 248h-32v-18.800293c7.7072754 1.8276368 15.7418213 2.800293 24 2.800293h8v-16h-8c-48.5234375 0-88-39.4765625-88-88 0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88s-88-39.4765625-88-88c0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88h-8v16h8c8.2581787 0 16.2926636-.9726563 24-2.800293v18.800293h-32c-4.418457 0-8 3.5820313-8 8v32c0 4.4179688 3.581543 8 8 8h96v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h176v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h96c4.418457 0 8-3.5820313 8-8v-32c0-4.4179687-3.581543-8-8-8zm-48 0h-16v-32.3981934c5.0522461 3.2409668 10.4038086 6.0529785 16 8.3935547zm-32-45.026123v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-144 64.637207v-32.3981934c5.0522461 3.2409668 10.4038696 6.0529785 16 8.3935547v24.0046387zm32-18.800293c5.1953735 1.2319336 10.5383911 2.078125 16 2.4956055v16.3046875h-16zm32 2.4956055c5.4616699-.4174805 10.8046875-1.2636719 16-2.4956055v18.800293h-16zm32-7.6999512c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-112-21.0214843v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-48 40.6325683c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-40 56.0046387v-16h88v16zm140.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm32-48v-16h176v16zm228.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm120-48h-88v-16h88z" stroke="black" stroke-width="0.2"></path>
</g>
</svg>
It's work, but when you use stroke-width = 0.2 its color merges with fill color. Try to use more lighter fill color. When you use stroke-width < 1 drawing engine uses more lighter colors to draw subpixel objects
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g stroke="black" fill="white" stroke-width="0.2">
<path d="m488 248h-32v-18.800293c7.7072754 1.8276368 15.7418213 2.800293 24 2.800293h8v-16h-8c-48.5234375 0-88-39.4765625-88-88 0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88s-88-39.4765625-88-88c0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88h-8v16h8c8.2581787 0 16.2926636-.9726563 24-2.800293v18.800293h-32c-4.418457 0-8 3.5820313-8 8v32c0 4.4179688 3.581543 8 8 8h96v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h176v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h96c4.418457 0 8-3.5820313 8-8v-32c0-4.4179687-3.581543-8-8-8zm-48 0h-16v-32.3981934c5.0522461 3.2409668 10.4038086 6.0529785 16 8.3935547zm-32-45.026123v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-144 64.637207v-32.3981934c5.0522461 3.2409668 10.4038696 6.0529785 16 8.3935547v24.0046387zm32-18.800293c5.1953735 1.2319336 10.5383911 2.078125 16 2.4956055v16.3046875h-16zm32 2.4956055c5.4616699-.4174805 10.8046875-1.2636719 16-2.4956055v18.800293h-16zm32-7.6999512c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-112-21.0214843v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-48 40.6325683c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-40 56.0046387v-16h88v16zm140.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm32-48v-16h176v16zm228.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm120-48h-88v-16h88z"></path>
</g>
</svg>
A third party JavaScript library antd is required in my project, which contains a svg image, and I expect to override the svg path.
I have read this post : CSS change d property of path and learned to do it with d:path(). But That only replace one path with another path. This is a snippet from that post :
#demo svg path {
d: path('M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z') !important;
}
Is it possible to do a full replacement ?
For example :
The original svg
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path>
</svg>
The expected svg
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M942.2 486.2Q889.47 375.11 816.7 112z"></path>
<path d="M942.2 486.2Q889.47 375.11 816.7 112z"></path>
</svg>
I expect to replace one path of original svg with two paths. Or replace mutiple paths with a new path. I try to find a more flexible replacement.