Editing .tpl CSS?

[DexSnake]

I want to make some changes to the appearance of one of my .tpl files - the sub catagories specifically. The first image is how my site looks currently, and the second is how I would like it to look. I just adjusted the width of the div with the container class to expand it out to accomodate five images in one row through the inspector in Firefox. However I am not sure how to go about changing this in the .tpl file. I will also need to adjust the breakpoint for the responsive aspect. Could someone help me out with this?

[Michael_D]

You should be able to do it all with CSS files by adjust widths of various division containers. Maybe this will help you.

 

You could set the .container at width:100% rather than a set px width; and it will adjust. You can also create a duplicate CSS rule prefixed with the @media declaration to adjust it for various sized displays. There are several ways to do what you like. By using max-width (allows room for various other factors and is responsive), min-width (also allows room for various other factors) , width(not as flexible or responsive), and using percentage (more responsive) or px(not responsive).

 

#columns { max-width: 1170px;} or #columns { max-width: 100%;}

.container  {max-width: 1170px;}

[vekia]

if oyu want to put these styles to .tpl file dont forget to use {literal} {/literal} tags, otherwise smarty will treat code as a part of smarty sytnax - this will end with errors