Jump to content

Is it possible to do media queries on squarespace 7.1?

Recommended Posts

I'm trying to do a regular CSS media query with a basic HTML table using a .container class. This is pure HTML, CSS, and JS, no bootstrap. I seem to not be able to affect the width of the table.container. Is this a limitation on squarespace 7.1? Would I need to inject it through the site in order to do it? 

 

    /*Trying media queries to target small, and medium screens*/
    @media screen and (min-width: 400px) and (max-width: 600px) {
        .container {
            position: relative;
            left: 100px;
            width: 300px;
            height: 600px;
            position: relative;
            margin-bottom: 400px;

            background-size: contain;
            max-width: 100%;
            max-height: 100%;
        }
    }

    /*For a medium tablet*/
    @media screen and (min-width: 600px) and (max-width: 800px) {
        .container {
            position: relative !important;
            left: 100px !important;
            min-width: 300px !important;
            max-width: 300px !important;
            height: 600px !important;
            position: relative !important;
            margin-bottom: 400px !important;

            background-size: contain !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
    }

 

Link to comment
  • Replies 1
  • Views 641
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

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