Jump to content

GMDI

Circle Member
  • Posts

    19
  • Joined

  • Last visited

Posts posted by GMDI

  1. On 1/23/2020 at 2:44 AM, tuanphan said:

    You need to know CSS to do this. If you create 2 images, then share link, we can take a look

    Hi Tuan, thanks for your help. You'll recognize the site, you helped me increase the site width using CSS.

    The site is igcalgary.com and I'd like to work on the first index section #services. I have attached two banner samples.

    What I would like to do is have a duplicate of each index section with an alternate banner image and hide the section depending on the screen size. I found this idea in the linked forum post. @Joeyearthly suggests creating different index sections and hiding them but I haven't been able to get that to work.

     

    wolf mobile banner.jpg

    wolf banner desktop.jpg

  2. On 11/14/2019 at 4:03 PM, christyprice said:

    If you are using an index page, I have a different workaround that I like a bit better, since you can make whole area specific for mobile instead of just the banner image. I create two "sub-pages" at the top of the index page, one for desktop view (with the URL slug home-banner) and one for mobile view (with the URL slug home-banner-mobile). Then I add the following code to Custom CSS. (Note that if you want to edit the mobile from your desktop, you'll need to briefly comment out the code so you can see that page on desktop.)

    
    /* show home page block dependent on screen size */ 
    @media only screen and (max-width: 780px) { #home-banner { display: none; } } 
    @media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } }

     

    @christyprice This sounds like an elegant solution. Do you have any troubleshooting advice? The code doesn't seem to affect my index sections, both remain visible. My site is igcalgary.com but I currently have the mobile only section unlinked, it's not live on my homepage.

    Thanks for your help.

  3. On 1/7/2020 at 7:40 PM, Vigasan said:

    Hey Hollie, the easiest way to do this is to upload both the mobile and the desktop images, then hide the incorrect one as needed with custom CSS. Or you could even set up a whole section for desktop and another section for mobile, and hide each section as needed.

    Hello, do you have more detailed information on how to achieve this? I've seen this solution mentioned a few times across the forum. Is there somewhere I can read more about this strategy? Thanks.

×
×
  • 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.