Map size

  • Resolved Jan

    (@jannetto96)


    5 years, 9 months ago

    How to edit map size to display to my customers?
    In mobile my map on my events have problems with width. I want to edit sizes in mobile and desktop with different sizes please

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • This is, again, a basic CSS question.

    Since preferences differ per layout, please look into css media queries to learn more about different sizes on different screens.

    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Thread Starter Jan

    (@jannetto96)

    dear, @duisterdenhaag.
    i tried with “div.em-location-map-container” but nothing works with width.

    Could perhaps try the following CSS? Please make sure that your Map is wrapped with a class of “em-google-maps-wrapper”

    @media screen and (max-width: 399px) {
	div.em-google-maps-wrapper {
		float: none !important; 
		margin: 0 !important;
	}
  div.em-location-map-container {
		height: 300px !important;
		width: 100% !important;
		display: block;
		margin-bottom: 20px
  }
}

@media screen and (min-width: 400px) and (max-width: 500px) {
	div.em-google-maps-wrapper {
		float: none !important; 
		margin: 0 !important;
	}
  div.em-location-map-container {
		height: 300px !important;
		width: 100% !important;
		display: block;
		margin-bottom: 20px
  }
}

@media screen and (min-width: 501px) and (max-width: 660px) {
	div.em-google-maps-wrapper {
		float: none !important; 
		margin: 0 !important;
	}
  div.em-location-map-container {
		height: 360px !important;
		width: 100% !important;
		display: block;
		margin-bottom: 20px !important;
  }
}
    Thread Starter Jan

    (@jannetto96)

    Done. Thank you @timrv and @duisterdenhaag

    Best Regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Map size’ is closed to new replies.