Making a map full width

  • Resolved Shutterbabe86

    (@shutterbabe86)


    9 years, 8 months ago

    I’m trying to get my site up and going and having a little trouble with a few customization’s. At the moment I’m having issues trying to make the Site Origin Map I have on my Contact page full width. I can make it full width stretched, but then it stretches over the entire page and looks kinda funky. I just want it full width to the width of the white area.

    I already read a post about how to do this with an image (writing full-width under the advanced setting of the image, etc) and was able to successfully do this to the front page (though there is still a weird small white area on the far right of the front image), but this doesn’t work for the map I’m trying to use. Here’s the link to the page: https://shutterbugpub.com/contact-us/

    Any help is much appreciated, thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for using Tracks!

    For making any element in a post the full-width of the container, first add the following CSS to your child theme’s style.css file, or to the Custom CSS section in the Customizer: 

    .entry-content .full-width {
	position: relative;
	max-width: none;
	width: 113%;
	left: -6.5%;
}
@media all and (min-width: 43.75em) {

	.entry-content .full-width {
	  width: 128.6%;
    	  left: -14.3%;
	}
}
@media all and (min-width: 56.25em) {

	.entry-content .full-width {
	  width: 150%;
    	  left: -25%;
	}
}
@media all and (min-width: 68.75em) {

	.entry-content .full-width {
	  width: 163.6%;
	  left: -31.8%;
	}
}
@media all and (min-width: 75em) {

	.entry-content .full-width {
	  width: 179.9%;
    	  left: -39.95%;
	}
}

    Then edit the post with the map or element you want to make full-width, and switch the editor from Visual to Text: https://pics.competethemes.com/image/253j081L0303

    Lastly, find the element you want made full-width, and put it into a <div> HTML element with a class “full-width”. So for example, if you have a paragraph you want to make full-width:

    <p>I am a paragraph HTML</p>

    You would make it full-width like this:

    <div class="full-width">
  <p>I am a paragraph HTML</p>
</div>

    You can surround any element including the map with the full-width div now to make it span the entire width of the post container.

    Thread Starter Shutterbabe86

    (@shutterbabe86)

    Thank you for the help! Unfortunately this isnt working for SiteOrigin Google Maps because there is no Visual or Text to switch from.

    Thread Starter Shutterbabe86

    (@shutterbabe86)

    It’s ok, I just switched it to a picture instead of a map. Thank you! You’re comment was still very helpful for future reference. ??

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome, glad it’s working now ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Making a map full width’ is closed to new replies.