embeded google maps-no margins-Venture theme

• 

  drderekwallin · Member · Feb 24, 2016 at 6:02 pm

  • Copy link
  • Add topic to favorites

  I need help with writing a CSS to get rid of the side margins when I embed a google map on a couple of my pages. The theme I have is the venture theme

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 24, 2016 at 7:21 pm

  • Copy link

  Hi there, are you talking about your Beverly Hills and Phoenix pages? If so, the map is taking up the entire content width area available (minus a bit of left and right padding so that the content isn’t right against the edges on smaller screens/windows. If those are the pages you are talking about, we can use the unique page id CSS classes set in the opening body HTML tag and widen just those two pages. This would be the CSS to widen them from 1170px to 1400px.

  .page-id-39 .container, .page-id-38 .container {
      max-width: 1400px;
      width: 100%;
  }

• 

  thesacredpath · Member · Feb 24, 2016 at 7:25 pm

  • Copy link

  Oops, let’s change that code just a bit and use this instead.

  .page-id-39 .site-content .container, .page-id-38 .site-content .container {
      max-width: 1400px;
      width: 100%;
  }

• 

  drderekwallin · Member · Feb 24, 2016 at 10:24 pm

  • Copy link

  That worked perfectly…Thanks so much for your help!

• 

  drderekwallin · Member · Feb 25, 2016 at 1:43 am

  • Copy link

  Can we make the map stretch out to the complete edge? This website–> http://baliwasdental.com has it at the bottom as an example! Thank you!

• 

  thesacredpath · Member · Feb 25, 2016 at 5:55 am

  • Copy link

  Yes, change the max-width value to 100% like this.

  .page-id-39 .site-content .container, .page-id-38 .site-content .container {
      max-width: 100%;
      width: 100%;
  }

• 

  thesacredpath · Member · Feb 25, 2016 at 5:57 am

  • Copy link

  If you want to get rid of the left and right padding, then change the above to this

  .page-id-39 .site-content .container, .page-id-38 .site-content .container {
      max-width: 100%;
      width: 100%;
      padding-left: 0;
      padding-right: 0;
  }

• 

  drderekwallin · Member · Feb 25, 2016 at 2:19 pm

  • Copy link

  awesome, you’re a life saver! I want to do that to my instagram widget too…..any help would be appreciated!! thank you!

• 

  thesacredpath · Member · Feb 25, 2016 at 10:08 pm

  • Copy link

  You are welcome, and I’ll answer the instagram question in the other thread.