Support » Plugin: Events Manager » Locations map. Two Sizes?

  • Resolved Livia329

    (@livia329)


    Hi

    I have tried adding in the css code you state on the FAQ page on your website however it affects both the single location map and the all locations maps.

    What I’d like is:
    – The map showing all locations to stretch across the width of the main page.
    – The single location map on the individual events pages to stay the correct size to work with how those pages are laid out.

    I tried splitting the css up like this but that didn’t work either. Nor did using percents instead. That being said I’m no coder!

    .em-location-map { width:500px; !important; height: 400px !important; }
    .em-locations-map { width:940px; !important; height: 400px !important; }

    Any ideas?
    Thanks!

    http://wordpress.org/extend/plugins/events-manager/

Viewing 8 replies - 1 through 8 (of 8 total)
  • That seems about right, any chance you could share a URL (or both) to have a look?

    Only thing that pops to mind is that the css is cached in your browser and you’re therefor not seeing changes reflected on the site.

    Sure it’s http://www.kidzkitchengroup.co.uk/clientview and then head over to the ‘Book Your Place’ page to see the All Locations page. Click on an event in the calendar to see a single page.

    I did see changes when I was altering the CSS but not the changes I wanted to see.

    Ok, seeing the below styling, so without the !important after the width. That should at least make the map outline follow your instructions (instead of the inline styling).

    .em-location-map {
    height: 400px !important;
    width: 500px;
    }
    .em-locations-map {
    height: 400px !important;
    width: 940px;
    }

    Not sure whether this also resolves the map itself, you might have to change that in the template files (not a coder either, but that was doable by following the instructions from the last paragraph of http://wp-events-plugin.com/tutorials/modifying-event-location-google-maps/)

    Thank you! looking into this.

    yes, you can try @thijsonline post above.

    Livia329: There’s one “;” too many in your CSS on both lines. As in Thijsonline’s code, the correct CSS has only a space between “px” and “!important”.

    Your code, with corrections and a helpful indentation:

    .em-location-map {
    	width:	500px !important;
    	height:	400px !important;
    }
    .em-locations-map {
    	width:	940px !important;
    	height:	400px !important;
    }

    These are easier to spot in an indented code, as the whole purpose of indentation is to make errors stand out. When you know there should be only one “;” on each line and that it should always be in the end, you’ll notice there’s something wrong faster if you have an extra “;” in the middle of a line. Reviewers also notice immediately if you show them CSS code where “!important;” has a line of its own.

    One of the best tools for working with CSS is currently Firefox browser. It used to need the Firebug extension, but now CSS, HTML and JS inspector is built-in. Right-click an element and choose Inspect Element (Q). You can try out changes for your map element live (they won’t affect anyone else) and you will notice that the currently active code has “400px !important” without a “;” in between.

    Not really related, but that’s the tool I also use to check what were the shortcut keys while posting here in WordPress forums. Bold is Alt-Shift-B and italic is Alt-Shift-I on Firefox Windows, but I occasionally forget that the accesskey for hyperlink is A instead of H or L.

    Hope this helps your day.

    Daedalon:

    Thank you very much for pointing that out and giving me a crash course. Didn’t realize at all. Much appreciated and it is now working 100% 🙂

    Thank you for all the help guys!

    .em-location-map {
    height: 300px !important;
    width: 400px !important;
    }
    .em-locations-map {
    height: 300px !important;
    width: 950px !important;
    }

    This worked for me however I needed to add it to my themes style.css instead of anything within the plugin folder. I was using the TwentyTwelve theme and it worked great!

    WordPress Web Design

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Locations map. Two Sizes?’ is closed to new replies.