Custom module with edge to edge width image

patvandenbosche

I have 3 locations for this business, and each one needs its own map. I do not want to use Google Maps because of issues I faced with huge extra charges not long ago, so the client asked that we have a map image that go from edge to edge in a custom module. Unfortunately I'm not sure how to make it go edge to edge.

I tried a custom module, inserted a screenshot image I made, and it is just too blurry, and it has a left margin I don't know how to get rid of it.

Right below that I used the <iframe> html code supplied by Google Maps, and it is crisp but still has the left margin issue. If I were to go with this option, how would I make it go edge to edge???

I'm attaching a screenshot that may help better explain what I'm talking about.
Here is the code I copied and modified:

	<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2293.655170309314!2d-87.83959792555626!3d35.610016031023925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1655048846068!5m2!1sen!2sus" width="1920" height="450" style="border: 0;" referrerpolicy="no-referrer-when-downgrade" loading="lazy" allowfullscreen="allowfullscreen"></iframe>

which produced this result:

saguaros

patvandenbosche

It seems that the iframe is set with a fixed width, you can try with this custom CSS to override it:

#Mod175 iframe {
    width: 100% !important;
}

patvandenbosche

I added the css code but all it did was fit it in the allotted space for the module position. I wanted it to be like an overlay image, going edge to edge. Since this is a map, and not an image, I can't set it as the overlay. Is there a way using css to set the module position to be edge to edge?

saguaros

patvandenbosche At this moment, this module is assigned to footer which shows inside a container.

You can go to Layout settings in template and edit this footer section + change the container to fluid.

Or if you don't want to affect other elements in current footer, you can create a new section in Layout settings + set it to Fluid and assign the map module to this section.

patvandenbosche

Ok, thanks, I'll give that a try.

patvandenbosche

It didn't work for me... or I should say I couldn't get it to work. But I've made a slight modification in how to display maps for the three locations, and I'm happy with that.

Thanks!

saguaros

patvandenbosche Let me know if you need further help then 🙂