Map in header

[Jorge]

I want to insert a map on a header with a width of 100%. I’m using a plugin that allows you to configure the map with that width and generate a short code to paste. The problem is that when the short code is pasted into the header or a section not looks 100%.

Configurartion:

Header
Container type: fluid

Secction
Box type: fluid
Container type: fluid

In the header it maintains the container content.
In the section is almost 100% but with a border on each side.

[Tom]

Hi there,

Give this CSS a try:

.inside-header.grid-container {
    max-width: 100%;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Jorge]

ok, I downloaded and installed the plugin, but do not quite know how it works.
I thought that when opened, I could see all the CSS code.
Do I have to paste just that? Sorry for my ignorance.

[Tom]

No worries! Once Simple CSS is activated, go to “Appearance > Simple CSS” and just paste the code above, then save 🙂

[Jorge]

thanks, but i tried it and it does not work

[Tom]

Can you link me to the page?

[Jorge]

No, I’m in the process of creation and i have on the local server.
Now I can do without that, but I would like to know how.

[Tom]

The code I gave you should work.

Make sure the map is set to be 100% or at least a very large width.

Otherwise there’s not much I can do without actually seeing what’s going on I’m afraid.

[Jorge]

I wanted the map occupied the entire width of the header or section.
The section is almost 100%, but with margins. In the header it seems as if the fluid container function does not work with the map.
It is rare why it works with any image.
The plugin lets you adjust the map width to 100%.

I decided to put the map in a section contained for now. If the customer wants the width to 100% will try other plugins.

thanks!

[Tom]

Ah, the margin can be removed in the Element Spacing add-on (Customize > Element Spacing > Header).

Or you can use CSS:

.inside-header {
    padding: 0;
}

[Author]

Posts