Jump to content

lewispickthall

Member
  • Posts

    6
  • Joined

  • Last visited

Posts posted by lewispickthall

  1. Site URL: http://www.whereslewisat.com/walking-the-wainwrights/

    Hello I am hoping you can help, I contacted one of your Squarespace team members regarding some issues I was having with a MyMaps map on my site, essentially I was wanting to format it so it was wider than 1240px., Tuanphan gave me some code to put in and it did the trick, however, I am wanting to implement the same principle on another map on site, I was wondering if you could help me identify what needs to change in the existing code has given me and then I can swap out the variable to the new one that's needed for the other map?

     

    This is the code that has allowed me to put the first map into how I wanted it...

    ----------------

    [data-section-id="61edbd4a0e1ca17f505cc2b1"] .content-wrapper {
        max-width: 90% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    [data-section-id="61edbd4a0e1ca17f505cc2b1"] .content-wrapper iframe {
        width: 100% !important;
    }
    html, body {
        overflow-x: hidden;

    -----------------

    This below is the Google Maps MyMaps produces in order to embed on my site through iframe, but it is limited in size, this is for my second map

    <iframe src="https://www.google.com/maps/d/embed?mid=1z76Ef8zCO849i6amm0Nj3FGijtKACxYu&ehbc=2E312F" width="640" height="480"></iframe>

     

    Can you help me identify what needs to change in the first chunk of CCS in order for it to work on my second map?

    For information my site is www.whereslewisat.com

    The first map can be found here: https://www.whereslewisat.com/walking-the-wainwrights

    The second map can be found here:   https://www.whereslewisat.com/about-me

     

  2. Site URL: http://www.whereslewisat.com/walking-the-wainwrights/

     

    Hello! I have embedded a map on my site and I was wanting to make it bigger, however when I add it to my site I cannot control the alignment of it, it just goes from left alightment over to the right?

    What code would I need to add to the HTML coding, in order to make it appear centre to the page?

    This is the code that Google MyMaps has given me to add to the site through the Squarespace coding widget, it doesnt appear to feature any alightment detail in the code?

    This page is on my site at www.whereslewisat.com/walking-the-wainwrights

     

    <iframe src="https://www.google.com/maps/d/embed?mid=1-YyaFsxihH4IsTFqAyhC29KHO2m51pfC&ehbc=2E312F" width="1500" height="800"></iframe>

    Also I am just asking to see if this is possible.. is there a code that could be added to make the HTML page-load to the exact width of the site page by default as well? This map is the main part of the page so would like it as big as possible, if I can make it 1500x800 and centre then great, however if there is a way to make it so it is max-width that would be great too!

  3. Site URL: https://cylinder-triceratops-8fh3.squarespace.com/

    Hello! I have embedded a Google Maps 'My Map' onto one of my blog pages, on the embed code I have stated for it to be a specific size, mainly to make it bigger and fill up the page, which the default code didnt quite do.

    However when I view the page in the mobile view, the embedded map is still the same size that I made it in desktop mode, is there a piece of embed code that can be used to make the map size down for mobile purposes. In addition I believe that the map is aligned to the left hand side, is there a tweak to the code or some additional code that can allow me to align to the centre? 

    The first screenshot is the map as it is current in desktop mode, the second is it in mobile mode, where I am having the main issues and the third image is a screenshot of the embed code that was used to get what I have currently 

    A.png

    B.pngC.png

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.