Hey,
Thanks for using my plugin!
I had a quick look, and you can indeed use CSS to modify the sizes of your SVG images.
I did a quick one using:
img.img-with-animation.animated-in {
max-width: 60%;
}
You might want to use your own class rather than targeting so many at once and obviously you might want to change the sizing, maybe even per image, which would require different classes for each one.
Personally, I would add a custom class to the image such as svg-size-control and use the CSS .svg-size-control { max-width: 60%; }
I hope this helps.
Let me know how you go.
Thanks for the quick response! How would I call each image individually with the .svg-size-control example you used?
I’m not too knowledgeable when it comes to css. Sorry.
So for example if I gave that image a “video” class name?
Wait. Never mind. I see. svg-size-control would be the class name.
I’ll give this a go!
My pleasure.
I would give all SVG images a class of svg-size-control how you mentioned using video, but it’s more relevant to name it the former.
Then just paste the next bit in your stylesheet or custom CSS area in the admin:
.svg-size-control { max-width: 60%; }.
Then you could take it a step further and give each image another additional class more specific to the individual image itself such as svg-video, svg-drone and then target those with more specific sizing on a per-image basis.
I hope that makes sense.
Total sense! I’m not back at my computer for a bit. If it’s okay, I’ll let ya know how it goes in a few.
Okay so I gave it the custom class svg-size-control. In the admin CSS settings I used the code: .svg-size-control { max-width: 60%; } and it seems to not change anything on the page 🙁
I do notice on the single image setting of visual composer, it forces me to set the image to take up 100% width of the column. Would the CSS overwrite this? I’ve also attempted to change that line of code within the page to 60%… still nothing.
Possible temporary fix… If I make the column size 3/4 + 1/4 (as opposed to 1/2 + 1/2) it obviously makes the image smaller. Still 100% of the column, but, because the column width isn’t as much it forces the image smaller.
Thoughts?
It looks like it’s just CSS specificity… so there’s something that has higher priority basically.
This should work for you:
.main-content img.svg-size-control {
max-width: 60%;
}
Hey, that worked like a charm!!!! Thank you so much. If you don’t mind… if you have a second… any explanation as to why this does over just the max-width? Why the .main-content stuff needed?
My pleasure.
CSS specificity is one of its core principles as a language. Basically you can target an element such as img, but if you assign it a class, then the class will have higher “specificity” or priority than just targeting the element.
For example in your case, there is existing styles applied to the .main-content img, and .main-content is a higher level parent of the img and therefore your applied class. So to override the already higher and more general code, we needed to target the new class within the higher priority element class.
While it’s a pretty simple concept, it might take some solid explaining to understand.
If you do a quick search for “CSS specificity” you’ll see a bunch of results that all explain it pretty well 😁
-
This reply was modified 8 years, 9 months ago by
Benbodhi.
