Search for a command to run...
I am a developer from North Carolina. I have always been fascinated by the internet, and scince high school I have been trying to understand the magic behind it all. ECU Computer Science Graduate
No comments yet. Be the first to comment.
As a technical person, it’s always been easy for me to focus on hard skills, numbers, and statistics. This worked well through school, personal projects and smaller teams; environments where I could accomplish a ton on my own. But now I’m working in ...
I recently wrote an article detailing how to embed Yotpo’s loyalty widgets on a headless site. As I was writing it, I thought “there is no way that the reviews widget will be this troublesome”. I was wrong, it was just as troublesome. For 2 primary r...
Currently, I am working on turning a Liquid-based Shopify store into a headless Hydrogen-based store. Part of this was transferring Yotpo embedded forms to the new headless site. As for the loyalty and referrals portion of Yotpo, you can embed these ...
Within Shopify, store owners are restricted from having full control of their store’s checkout page. This is a safety feature on Shopify’s end, protectecting store owners and customers from accidentally (or purposely) exposing private information. Th...
HSTS is HTTPS Strict-Transport-Security. It enforces that only HTTPS is used across your web application, preventing unencrypted traffic being monitored and collected by unwanted entities. HSTS in Hydrogen It can be enabled in your Hydrogen app via r...
I’m currently revamping a client’s website through Squarespace. Even though website builders aren’t my prefered choice for development, they do allow clients easy access to update their site in the future.
For a particular section, I need there to be a separate background image for desktop and mobile. Surprisingly, there is not a built-in support for this on squarespace without custom CSS.
So here is how I accomplished this…
In Squarespace dashboard, go to: Website → Pages → Website Tools → Custom CSS. This is the setting that allows you to implement custom CSS into your squarespace site.
Next, you will need to locate the id of the particular section you want to edit
Go to your live site url and press F12 to open the browser console
Find the <section> element of the section you would like to edit
Copy the value of the data-section-id tag. Should look something like: 63862367f9b5960c6ad5537e
Here is the CSS that should allow you to acheive the desired functionality:
@media (max-width: 640px) {
section[data-section-id="your_section_id"] .section-background img {
opacity: 0 !important;
}
section[data-section-id="your_section_id"] .section-background {
background-image: url('image_url');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
Values your_section_id and image_url come from the section id you found in the last step, and the image you wish to load as the background on mobile. I would suggest uploading your image to the Squarespace assets, and accessing the link from there.
Hopefully this works, feel free to reach out for any questions!
Thank you for reading