Headline Icon, big size, without text, cover links

This topic has 14 replies, 3 voices, and was last updated 4 years, 1 month ago by David.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
August 17, 2021 at 11:15 pm #1899662

Atefan

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

August 18, 2021 at 12:40 am #1899727

Elvin
Staff
Customer Support

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).

August 18, 2021 at 1:37 am #1899779

Atefan

Thanks, Elvin,
But then in mobile view, it is too large.
or is there a way to control that?
Thanks

August 18, 2021 at 1:41 am #1899786
Elvin
Staff
Customer Support
Definitely doable. 😀

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. 😀
August 18, 2021 at 1:56 am #1899798

Atefan

Hey Hey Hey,
Thank you VERY much!

August 18, 2021 at 2:31 am #1899820

Atefan

But one thing I lose, the drop shadow, right?

August 18, 2021 at 8:10 am #1900361

David
Staff
Customer Support

Hi there,

you would need to add the box-shadow property to you custom CSS.

August 18, 2021 at 9:02 am #1900446

Atefan

Hi David,
How this would look like?

August 18, 2021 at 1:42 pm #1900631

David
Staff
Customer Support

Can you show me the set up you had with the Headline Block with Icon and Drop Shadow ?

August 18, 2021 at 10:16 pm #1900877
Atefan
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
August 19, 2021 at 1:46 am #1901022
Elvin
Staff
Customer Support
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);
} 
```
August 19, 2021 at 4:27 am #1901141

Atefan

Thanks Elvin,
But his have shadowed the container:
https://ibb.co/vwLcv4g

Kind Regards

August 19, 2021 at 5:51 am #1901206

David
Staff
Customer Support

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.

August 19, 2021 at 5:53 am #1901207

Atefan

Hi David, no I think it’s ok.
Just asking, not to spend too much time on it.
Thanks

August 19, 2021 at 8:20 am #1901499

David
Staff
Customer Support

No problem !
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

[Support request] Headline Icon, big size, without text, cover links

Popular Articles

Start building better websites today.