CODEWITHSUNDEEP
htmlcssmedia-queries
ashwin1014
ashwin1014

Reputation: 371

change svg size according to media query

<svg width='1175' height='400'>

How do I change width and height of the svg img with media queries?

@media only screen and (min-width: 1680px) {
   svg{
      width:1720;
      height:400;
      }
}

This does not work.

Upvotes: 1

Views: 6078

Answers (4)

Raunak Tripathi
Raunak Tripathi

Reputation: 11

Changing the SVG size is relatively an easier task. Refer below:

@media only screen and (min-width: 1680px) {
  svg {
    width:1720px; //as a rule of thumb, always give px,%,vw units etc.
    height:400px;
   }
}

Alternatively, We can use the SVG viewBox, which is quite different from viewport(your browser window). You can define the position and the dimension of an SVG viewport using

<svg viewBox="0 0 250 250"></svg>

You might be looking for CSS property which is proposed in SVG2. The proposal is in this PR : Proposal: Promote SVG Viewbox to a CSS property, extend to all transformable elements #7. Happy Coding!

Upvotes: 0

Jithin Raj P R
Jithin Raj P R

Reputation: 6827

you can change width and height with media queries like the following but it's always ideal to wrap the SVG to a div or viewbox and make it responsive according to your page.! 

@media only screen and (min-width: 1680px) {
 svg{
   width:1720px; //or any css units
   height:400px; //or any css units
 }
}

Upvotes: 2

Thibault
Thibault

Reputation: 434

Prefer the viewbox attribute on your svg, rather than the width and height. This way you can easily adapt the size of your svg, keeping the right ratio.

Upvotes: 1

Mateusz Dobrakowski
Mateusz Dobrakowski

Reputation: 30

It looks like you have a typo: missing closing "}". Also you should always declare px if you want to use them. Good practice.

Upvotes: 0

Related Questions