Full screen map

New home Forums Basic Version General queries Full screen map

Tagged: ,

Viewing 15 posts - 1 through 15 (of 99 total)
  • Author
    Posts
  • #22412
    mrzpro
    Member

    Hi, how is possible to have a full screen map like the one on your home page?

    #22428
    PatD
    Moderator

    That map is set to 100% width (rather than being truly “full-screen”). Since our WordPress theme is 100% the width of the screen, the map is also 100% the width of the screen. If your theme is set up differently you’d have to modify the styling to get the same effect. If you need assistance with that, we’d be happy to help.

    #22446
    mrzpro
    Member

    Hi Pat, following the link on which I’ m working:

    mappa
    and I tried also to to modify the width but that is the result….

    #22454
    PatD
    Moderator

    Well, it looks like your theme has padding or even empty columns creating less than a full-width container for the map. I looked at your code (disabling right-click doesn’t actually prevent anyone from looking at your code (or stealing it if they wanted to do so), it just provides you with a false sense of security) and there are a huge number of <div>s set in your theme between the <body> and your map. In order to create a truly full-width map, you’ll need to set the <div>‘s following the header (which is full-width) to a width of 100% of the screen as well. Your map is set to display at 100% of its containing <div>, but neither that <div> nor the ones above it in the chain are set to 100%.

    If you’d like help getting this styling right, I could login to your site and take a look. I’d prefer not to mess with your styling on your site as it is very complex and I don’t want to break it, so I’d need FTP access so I can download the files and put it up on a dev site to play around with.

    Would you mind allowing me temporary admin and FTP access to your website? Please do so in a private reply in this thread so that only our support staff can see the information. (Check the box next to “Set as private reply” below the reply editor box.

    Please provide:

    WordPress Access
    – URL to wp-admin
    – Temporary Admin Username (please do not send any existing admin information)
    – Temporary Admin Password

    FTP Access
    – ftp hostname or IP address
    – ftp username
    – ftp password

    Thanks in advance.

    #22462
    mrzpro
    Member
    This reply has been marked as private.
    #22475
    PatD
    Moderator
    This reply has been marked as private.
    #22488
    mrzpro
    Member

    Thank you for your kind cooperation

    #22557
    PatD
    Moderator

    Just wanted to let you know I’m still working on this. There was a lot more to download (and then upload to my test site) than I originally thought since the parent theme is one of those “kitchen sink” things with all the accompanying plugins.

    #22582
    PatD
    Moderator

    I found the following being applied in the tc-common.css stylesheet for your Customzr theme:

    `
    @media (max-width: 979px) and (min-width: 768px)
    .container, .navbar-fixed-bottom .container, .navbar-fixed-top .container, .navbar-static-top .container, .span12 {
    width: 724px;
    }
    `

    This is being applied on my wide screen monitor even though the max-width is more than 979px. It is setting the width of the container holding the map to 724px. This code is in your CSS to ensure it is mobile-ready (responsive). You could change it and make the map full-screen on your particular monitor. I wouldn’t really recommend it. Your theme is relying not just on CSS but on page layouts,etc.. to build your site. Messing with this CSS is likely to really mess things up down the road. (Personal Opinion Disclaimer: This is why I don’t like these “kitchen sink” themes. It is too hard to tweak them to fix “little” problems like this.)

    I will ask one of the developers to take a look at this. They may find an answer where I cannot. Thanks in advance for your patience.

    #22616
    PatD
    Moderator

    Dylan kindly stepped in and assisted me on this. He added the following to the custom CSS for the map that was on your home page (Map number 6) to the CSS for that map:

    #wpgmza_map_6 { width: 100vw !important; }

    Then he added the following jQuery to the core.js for the plugin to adjust the placement of the map:

    var map_offset = jQuery("#wpgmza_map_6").offset();
    jQuery("#wpgmza_map_6").css({"margin-left" : -map_offset.left});

    He added this code directly below this section in core.js:

    jQuery(document).ready(function(){

    If you want other maps to be full screen you’ll have to make similar adjustments.

    I hope this helps and I’m sorry it took so long to get a resolution to your question.

    #22617
    mrzpro
    Member

    Hi Pat, I see changes and, at this link:
    ferentinesi-nel-mondo
    the map is full screen but totally placed on the right for about 380 pixels
    in the mentime this other one:
    ambiente
    visualize nothing, the map is not visualized…..

    #22621
    PatD
    Moderator

    You’ll need to add the custom CSS to each map and add another line like this in core.js for each map as well as described above:

    var map_offset = jQuery("#wpgmza_map_6").offset();
    jQuery("#wpgmza_map_6").css({"margin-left" : -map_offset.left});

    Change the map number (#wpgmza_map_6") to whatever map number you are working with.

    I will ask Dylan to take a look at the problem with the original map.

    #22622
    mrzpro
    Member

    Hi Pat, I can not understand about what css we are talkin about as both my custom css from plugin and custom css from theme I do not find customization you say. If there is another css file surely it will be changed with a future update loosing changes.
    Furthermore I, if it was possible, I just wanted to change this map and not all maps….

    #22623
    Dylan
    Moderator

    Hi there,

    Thank you so much for your time on this one.

    The code changes we applied, will only affect map ‘6’, is there a different map you would like to target?

    With regards to the map not being placed correctly on your side, I believe this is simply due to browser caching, as the map display as intended on my side. (Please see attached screenshot)

    I have fixed the issue you were having with the following map: http://www.ferentino.org/ferwp/ambiente/

    Attachments:
    You must be logged in to view attached files.
    #22649
    mrzpro
    Member

    Hi Dlan, sorry to bother you but I would like tosse the map as you see it but see attached image is not so…..
    The other map now is OK
    What will happen when the plugin will be updated?

    Attachments:
    You must be logged in to view attached files.
Viewing 15 posts - 1 through 15 (of 99 total)
  • You must be logged in to reply to this topic.