Template used in example: Alter ( SkaDate software premium template).
Conditions: mobile version disabled.
Here is default look and feel of index page in mobile browsers. As you can see logo ( slogan part) is not fitting in.
To fix this and make your Skadate logo responsive go to Admin Panel >> Appearance >> Customize >> CSS tab >> Edit CSS box and add:
@media (max-width: 480px) {
.sitelogo
{
width: 100%;
background-size: 100%;
}
}
For those of you not familuar how to add custom CSS, please watch following short video showing the process:
Result:
Assign custom max-width to adjust logo sizing for different dislay sizes.