e2astudio

There is script in there. That's not CSS. Move that to Code Injection before you try to evaluate any CSS issues.

This can happen with images set to 'Fill,' since they grow to fit the space available. However, many mobile devices browsers change the available space due to the address bar being shown or not while you scroll. Try switching from 'Fill' to 'Fit' for the affected images. 

Whoops, my error - I corrected my post too.

Change `data-src` to just `src`

You can, but there's no easy way to hide it when it's placed using Fluid Engine. Instead, place the image in a Code Block wrapped in a `<div>` - something like this:

<div class="payment-icons" style="text-align:center;">
  <img src="https://images.squarespace-cdn.com/content/v1/627082fb22c34f331451d6b6/edb21702-9537-470f-a4a5-e349ea0d099c/Payment+Processor+Icons+1.png">
</div>

Then, with that Custom CSS snippet above, you should be okay to go.

7 minutes ago, ShuiFeng said:

I'm a bit stuck at the beginning though.

I see. I misunderstood - I thought you already had that figured, just needed help to show only on cart.

It will take some custom code to complete using .svg icons. You can't do it with a traditional image from a gallery.

This Custom CSS will hide the site header and footer on the homepage only, where you've added your video and enter button.

/* hide header and footer only on homepage */
.homepage {
  header, footer {
    display:none;
  }
}

Consider providing a link to your site so people in the community can help.

ul.sqs-tagcloud {text-align: center;}

Consider providing a link to your site so people in the community can help.

Pretty sure Overlay is available as a toggle on the image block design tab? 

@paul2009 is correct. You could add your payment icons using a code block so you can add a class to the icons wrapper element. Then hide it everywhere except the cart with a custom CSS snippet like this:

/* cart id not target */
body:not(#cart) .payment-icons {
  display: none;
}

To date, Squarespace websites are not WCAG compliant.

18 hours ago, KenA said:

Is it possible to upload them as files, then add links to them on a Squarespage page, so that the link DISPLAYS IT AS A WEB PAGE?

Nope. You could create a Squarespace page, and use a Code Block and paste your code I guess. 

I do see a JavaScript error in the console that could be blocking the images from loading? Not sure. Otherwise, there is generally a Site Styles option to toggle images on or off for the Blog List, depending on what template you're using.

59 minutes ago, Gibran said:

You mean by injecting javascript code?

No. Generally, there are two ways to customize page elements with CSS.

1. The method @tuanphan is describing (inspect a Squarespace element and find the class already assigned by the system or template, then override or add styles to that specific class in Design -> Custom CSS)
2. Add your own custom class with styles in Design -> Custom CSS and then add a Code Block containing the HTML with your custom class assigned.

The only way to add a custom class to an element is to add the element yourself using a Code Block. 

Add this code snippet to the CSS Editor found within Style Editor:

.footer-inner { padding: 64px 32px; }

Change the '64px' top/bottom value to your preferred amount. I strongly suggest leaving the right/left value alone.

Consider posting a link to your site so people in the community can help.

@D_Schneider I've corrected my answer, realized you were calling the wrong class for the quantity.

Looks like you have the wrong class on the quantity - it's -input not -select.

<style>
 .sqs-add-to-cart-button-wrapper,
 .product-price,
 .product-quantity-input {
   display:none;
   visibility:hidden;
 }
</style>

Better yet, it's easier if you just hide the wrapper that holds the button and quantity like this:

.product-add-to-cart,
.product-price { visibility: none; display: none; }

Looks like it worked ... I'm not seeing a date in your Principles blog.

Always be sure to remove any code you add that does not work.

To add this snippet of custom CSS to your site, just click the CSS button inside the Style Editor and paste the code below:

.display-icons-in-post-footer .entry-date {
 display: none;
}

That should do the trick.

To hide the date only in one specific blog, preface this code with the unique collection id class found on the BODY tag. In your case, this class is collection-51bbee6be4b0405092e5f752 – so the snippet would look like this:

[code].collection-51bbee6be4b0405092e5f752.display-icons-in-post-footer .entry-date {  display: none;}

Post a link to your site so the community can help.