How to add padding to the logo in small-screen display only?

[Meddysong]

I'm a bit befuddled, so I wonder whether anybody could give me some pointers.

My logo displays perfectly on wide screens. There is a natural padding placed in the display so that it looks exactly as I want it to, even though the image itself doesn't contain any padding at all:

The problem occurs when collapsing for a small screen. The natural padding that was provided disappears and the result is yucky:

I tried adding padding to the original image. It now looks perfect on the small screen but too padded on the desktop and has the knock-on effect of adding padding below the user navigation because technically the logo is higher.

So the solution would be not to touch the logo itself but instead have some top and bottom padding emerge only on small screens. What would be the best way to do this? I presume it could be done in responsive.css but ideally I wouldn't want to change the CSS unless it's in custom.css ... in which case, whatever changes I made would apply to desktop as well.

Is it possible in custom.css to make changes that only apply when the screen collapses? Or is it even the case that this is a design oversight and a justifiable feature request because surely everyone wants a degree of padding rather than the logo touching the elements above and below it?

 

[The Jimmo]

You need to target the window size in CSS that you are attempting to edit, you would not want to edit directly IPS' style sheets, you want to edit the custom.css sheet. Everything in custom.css should overwrite the existing framework.

Example for targeting screen sizes smaller than 768px:

@media only screen and (max-width: 768px){
    .someclass { 
        padding: 10px;
    }
}

 

[Meddysong]

Ace - thanks! custom.css was exactly what I was asking about but I didn't know how to go about targeting a small screen - now I do. I'll give it a go tomorrow. Thanks for your help

Edit: Actually, why put off tomorrow what can be done in ten minutes today?

Pointer for other people interested: Since elLogo is an ID rather than a class and we need to target an image within it, the CSS is

@media only screen and (max-width: 768px){
#elLogo img{
     padding: 10px 0;
    }
}

Works like a charm for me

[Meddysong]

A quick correction. I shouldn't have asked for only the small screen, since the collapsing kicks in with the tablet sizes, so I still had the same problem in the medial range.

The solution therefore was to apply

@media only screen and (max-width: 979px){
#elLogo img{ 
     padding: 10px 0;
    }
}