Archived topic
Headline Icon, big size, without text, cover links
14 replies · Started by Atefan on August 17, 2021
Hello,
On the given website below, you will see the letter Plug & Print,
This is an SVG icon, size 20, I have to reduce the spacing, top, and button by -100.
So that the distance is ok, to the links below and the upper box frame.
But now, the links are unclickable, as it is covered from the headline box, with the SVG Icon.
Furthermore, when I go to https://www.browseo.net/ and add this URL, as it shows how google sees the website.
you will notice at the end, exactly what these links show up, what is covered from the headline box.
Any Idea, what I'm doing wrong?
Thank you
Hi there,
If I may suggest:
I think you should just add the SVG through a custom HTML block wrapped w/ a div.
This way you can control it easier as it won't have extra div coming from GenerateBlocks. With this setup, you won't have to do negative margins and do padding instead (for easier control, no overlapping).
Thanks, Elvin,
But then in mobile view, it is too large.
or is there a way to control that?
Thanks
Definitely doable. :D
I'd suggest wrapping it in a div.
Example structure:
<div class="plug-and-print-svg">
<svg....>
</div>and then control it with different media rules.
Example:
/* for desktop and tablets */
@media(min-width:769px){
.plug-and-print-svg svg{
your styling here
}
}
/* for mobile devices */
@media(max-width:768px){
.plug-and-print-svg svg{
your styling here
}
}This gives you better control over the SVG sizing. :D
Hey Hey Hey,
Thank you VERY much!
But one thing I lose, the drop shadow, right?
Hi there,
you would need to add the box-shadow property to you custom CSS.
Hi David,
How this would look like?
Can you show me the set up you had with the Headline Block with Icon and Drop Shadow ?
Hi David,
I use only these two CSS files for shadow:
<-- start shadow icon svg-->
.gb-icon{
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
}
<-- end shadow icon svg-->
<-- start drop shadow button-->
.gb-button {
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.3);
}
<-- end drop shadow button-->Kind Regards
You can add another .plug-and-print-svg that isn't wrapped with @media rule.
Try this.
.plug-and-print-svg svg {
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
} .plug-and-print-svg {
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.3);
} Thanks Elvin,
But his have shadowed the container:
https://ibb.co/vwLcv4g
Kind Regards
You can't style an .svg image using external styles ( well not without a lot of fuss ), those styles would have to be baked into the image.
Personally, if the image shadow is that important, then revert back to using the GB Headline and we can look at fixing the original problem with that in place.
Hi David, no I think it's ok.
Just asking, not to spend too much time on it.
Thanks
No problem !
