How to change the width of the page containers

In: General

Small page containers are the part of the Tattoo Studio design but if you want to change it, you can use the following css code;

<style>
@media only screen and (min-width:800px)
{
.page-content
{
    width:800px !important;
}
.page-content-small
{
    width:600px !important;
}
}
</style>

You can change width values. “page-content” class is used on large page template and on default page template. “page-content-small” class is used on special page templates like artists,faq,contact. So I recommend you not to use too big values for page-content-small class.

I also recommend you not to use a number which is bigger than 800. If you do this, there may be layout problems on some mobile devices.

You can also use percantages instead of pixels like on the following example;

<style>
@media only screen and (min-width:800px)
{
.page-content
{
    width:100% !important;
}
.page-content-small
{
    width:70% !important;
}
}
</style>

If you use percentages, pages may look weird on huge desktop screens. So setting max-width values for them may be a good idea like on the following example;

<style>
@media only screen and (min-width:800px)
{
.page-content
{
    width:100% !important;
    max-width: 1200px !important;
}
.page-content-small
{
    width:50% !important;
    max-width: 1024px !important;
}
}
</style>

You can play with these values. If you have enough css knowledge, you can also add new properties.

You can copy paste these codes to Extentions->Template Manager->ttstudio->General->Custom Script field.