How to customize blog post width on tablet screens

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About This Tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

You've probably noticed that sometimes your carefully crafted content doesn't quite hit the mark on tablet devices. There is good news - I've got a simple solution that's going to change your blogging game!

In this tutorial, I'll walk you through a quick and easy CSS trick to customize your blog post width specifically for tablets. Don't worry if you're not a coding pro just yet - I'll break it down step by step. The code is below the video, but please make sure you watch it so you understand how to add this code to your site and how to change it to make it uniquely yours.

Squarespace Tutorial

---

Code Example

Here are the codes from this tutorial. Be sure to customize the values to match the style of your unique website!

@media only screen and (min-width: 768px) and (max-width:1024px){.blog-item-inner-wrapper{
  margin: 15vw!important;
  width: 70%!important
}
}

---

Related Content

📺 Tablet view workshop → insidethesquare.co/tablet

📚 Squarespace CSS Code Collection → insidethesquare.co/css

🙋‍♀️ Code troubleshooting tips →insidethesquare.co/code-help