Jump to content

BrookeP

Circle Member
  • Posts

    34
  • Joined

  • Last visited

Posts posted by BrookeP

  1. Hi there, 

    I am having scrolling issues on my client's site when viewed on mobile screens. It seems that the website buffers and does not allow the user to scroll down immediately from the top of the page, especially on the blog page (shown in video attached).

    I implemented the below code to hide overflow/horizontal scrolling on the website that I believe could be the issue. The code works seamlessly on desktop and some mobile screen sizes, but on some sizes I believe it is the cause for creating this "buffer scroll" issue you see in the video attached.

    Code implemented: 

    html, body {
        overflow-x: hidden;
    }

     

    I have tested the website on an iPhone Xs, iPhone 14 Pro, iPhone 12 mini, and Samsung Galaxy and this scrolling issue does not occur. However, when tested on an iPhone 13 and 12, this is when the issue occurs. It was also tested on Safari and Chrome and on some phones it works just fine, but others it does not. I am wondering if this code or another needs to be adjusted to suit for a certain screen size, but I'm not 100% sure how best to approach that/what to fix.

    I would love some insight and assistance on what could be causing this issue, and how best to resolve it. Any help is very appreciated!!

  2. Site URL: https://ashleyguicecreative.com/

    I have implemented a "typewriter text" effect with javascript on my client's site. However, I only want this function enabled on desktop/tablet view only, not on smaller mobile screens. See the section I am referring to here:

     2087913413_ScreenShot2022-09-12at12_26_31PM.thumb.png.5329ccbd4ff5a7e21cd080d44e6370e1.png

    I'm not familiar enough with javascript itself to implement a media query that would allow this, so any help on how to write this would be greatly appreciated!!

    Thank you!

  3. Site URL: https://oleander-round-6gnb.squarespace.com/

    I've applied a small border around some images of the site (Brine template) using CSS and they look fine in the editor window. However, when I view the site live/refresh, some of the borders are showing up incomplete - for example, maybe the top of the image not having a border, or the right side not having a border, while the other sides do. I've attached screenshots as examples.


    The code I've applied (and used on many other sites) is below: 

    #BLOCK-ID img
    { border: 1px solid #000000;}

    I've tried including '!important;' as well for specific ones that aren't working, but no success. If anyone could provide insight as to what may be causing this issue I would really appreciate it! I've never had this issue before and it's driving me nuts.

    Site password: kassandra

    Thank you!

    Screen Shot 2022-01-17 at 3.33.26 PM.png

    Screen Shot 2022-01-17 at 3.33.50 PM.png

    Screen Shot 2022-01-17 at 3.40.00 PM.png

  4. Site URL: https://michelle-gonzalez-photography.squarespace.com/test-magazine

    Hello, 

    I am currently trying to change the position of the thumbnail images in a Gallery Slideshow block on the Brine template (7.0) from the standard placement (below the main/active image) to the right of the main/active image. I am trying to achieve a layout similar to the website below - section titled "Love in Ink Magazines":

    https://laurkenkendall.com/

    I've also attached images of what I currently have vs what I would like.

    Is this possible to do? Would appreciate any help as I've been wrecking my brain for hours on how to achieve this. Thanks so much!!!

    Screen Shot 2021-08-10 at 4.29.42 PM.png

    Screen Shot 2021-08-10 at 4.29.53 PM.png

  5. Is there a way to remove padding inside of a code block?

    I've inserted an image using a Code block and want the block to fit snug around the image itself, but I'm getting an extra padding on all sides.

    Here is a link to the site for reference
    Password: weddings

    This is the code I currently tried to use:

    
    
    .sqs-block-code .sqs-block-content {
    padding-top: 0px;
    margin: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    }  
    
    

    Any help would be much appreciated!

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