Everyone wants a responsive Joomla template for their site. 

However, if you buy or download a responsive Joomla template you will probably need to edit certain elements to meet the needs of your site. You may also need to fix problems on certain screen sizes.

In this tutorial, we're going to show you some CSS examples so that you can see how to customize your site for different screen sizes.

Create the CSS file

We will show you some examples based on the Breeze template.

To add custom CSS code we will first need to create a file named custom.css inside templates/ostrainingbreeze/css/. This file will be loaded automatically by Breeze. This custom.css file is a tool used by many different template companies.

Example #1. Customize the search box

In our first example, looking at Breeze on a smartphone, we see that the search box is aligned to the right below logo.

Let's move to the search box to the top to keep it aligned with the logo. We'll also control the width of the search box.

Open the custom.css file and add the following code:

@media (max-width: 480px) {
    #mod-search-searchword{
        margin: 0 auto;
        width: 90px;
    }
}

max-width: 480px means the CSS will be working on screens with that maximum size.

After adding the code, this is the result:

Example #2. Center the copyright text

In screens with maximum width of 640px the copyright text is aligned to the left.

Let's center by adding the following code:

@media (max-width: 640px) {
    .copyright-ost{
        text-align: center;
    }
}

After adding the code, this is the result:

These two media queries are examples of small customizations to Joomla templates that fix minor problems only on certain screen sizes.

If you need help testing your device on different screen sizes, we highly recommend Reponsinator or BrowserStack.