How to resize a map on Dawn theme homepage?

Store Design
1

I am switching over to Dawn currently. I linked a map to our homepage, but the thing is huge. It takes up almost half of the screen. Does anyone know how to downsize it? This is the code that I have going on:

 
#  Visit Us
###  The Exchange, 15 West 47st, Suite E18, NY, NY 10036 

 Open Mon-Fri, 10AM - 5PM

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.2322663714376!2d-73.98199588459363!3d40.756915929327015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x921d6852b21099b!2sArt+Brown+International+Pen+Shop!5e0!3m2!1sen!2sus!4v1540753409661" width="600" height="450" frameborder="0" style="border:0"></iframe>@media only screen and (min-width: 750px)

I would also like to figure out if it is possible to add “contact for info” on out of stock products like I was able to do with the “Debut” theme. Any answers would be great.

1 Like
2

Hi @ArtBrown ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Whoops, got ya. https://savingspros.com/ The map takes up almost the entire screen

4

Hi @ArtBrown

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
#section-template--15725851934977__1646068954a5e4f347-padding .google-maps iframe {
    height: 400px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

@ArtBrown

Please add the following CSS code to your assets/base.css bottom of the file.

#section-template--15725851934977__1646068954a5e4f347-padding .google-maps iframe {
    height: 400px !important;
}

Thanks!

6

This did not seem to work. Did i place it in the right spot?

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
}
  }
   
}
  #section-template--15725851934977__1646068954a5e4f347-padding .google-maps iframe {
    height: 400px !important;
}
7

Any tips on this? It did not work where I placed it.

8

Hi @ArtBrown ,

You try Paste below code on top of base.css file:

.section-template--15725851934977__1646068954a5e4f347-padding .google-maps iframe {
    height: 400px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

Thanks, that did make it shorter. However is is still double wide and now has a world of padding between the map and the footer. I added the same line with width, which did adjust the width, but now it isnt centered.

10

Hi @ArtBrown ,

You try Paste below code on top of base.css file:

.section-template--15725851934977__1646068954a5e4f347-padding .google-maps {
    padding-bottom: 400px !important;
}

.section-template--15725851934977__1646068954a5e4f347-padding .google-maps iframe {
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

11

This one worked out. Thank you so much!

12

Avada,

I’m trying to place a google map on my homepage.

I added a custom liquid section pasted the google info and then added your code snippet.

It’s not working for me. What am I doing wrong?

https://smokers2022.myshopify.com/

pw cheese