I'm learning to place media queries into a website for getting the correct layout changes I need on different mobile devices. I've done this in CSS and Bootstrap before, but my job is asking me to do it in an entirely JSON website.

I found a few different points in the website's style sheets that are formatted like this:

@media screen and (min-width: 1024px) {
  .productgrid--outer .pagination--container,
  .productgrid--outer .breadcrumbs-container {
    padding-right: 0;
    padding-left: 0;

Is this media query applying these padding rules to anything using the tags listed in there, like .productgrid--outer? If I'm reading this correctly, then I could make media queries using the same formatting for the tags that I need to change then. I think that's what is happening, but I've never poked with JSON before so I wanted to make sure I'm not misreading this.

  • What does "entirely JSON website" mean? I'm not aware of any way to make a website using only JSON. The code you provided looks like it is CSS not JSON. Maybe it is using a framework that formats JSON data into templates? Oct 2, 2023 at 20:16
  • As an example, the website's asset pages are like this "style.css.liquid" or "Index.json", if that helps with clarification.
    – user138295
    Oct 2, 2023 at 20:19
  • I'm not sure what an "asset page" is. Do you mean the assets of the page? Oct 2, 2023 at 20:43
  • I mean an "asset page" to describe a type of page or sheet that provides styling or scripting for other pages within a website. Examples would commonly be a "style.css" page, a "custom.min" page, or maybe a "template.liquid" page.
    – user138295
    Oct 2, 2023 at 20:47
  • Okay, I would usually use URL for that. A page is something that the user looks at in a web browser. Oct 2, 2023 at 21:44


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.