[sarahadams]

I am trying to make my website more mobile friendly and aesthetic, since most of my readers are visiting from mobile devices, and after I checked the add custom css to responsive theme, everything but the site title scales down. A snippet of my custom CSS… #site-description {
text-align: center;
font-family: ‘life savers’, ‘gentium basic’, serif;
font-weight: bold;
margin-top: 10px;
}

#site-title {
text-align: center;
font-family: Montez, Tangerine, serif;
font-weight: none;
font-size: 75px;
}

I’ve tried translating it into ems and it hasn’t worked, mind you, I am new to customizing css for mobile. my site is http://www.thestayathomesoprano.com. I have left the modified css up so the problem in the mobile site can be seen.

all my custom css below…

@import “https://fonts.googleapis.com/css?family=Tangerine:400,700|Montez”;

@import “https://fonts.googleapis.com/css?family=Quattrocento:400,700|Life+Savers:400,700&subset=latin,latin-ext”;

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.signature {
font-family: tangerine, Montez, serif;
font-size: 64pt;
text-align: center;
line-height: 75px;
}

.Plugin {
font-family: quattrocento, ‘life savers’, Serif;
font-size: 14px;
line-height: 30px;
font-weight: bold;
}

#site-description {
text-align: center;
font-family: ‘life savers’, ‘gentium basic’, serif;
font-weight: bold;
margin-top: 10px;
}

#site-title {
text-align: center;
font-family: Montez, Tangerine, serif;
font-weight: none;
font-size: 75px;
}

.entry-title {
font-family: ‘life savers’, quattrocento, ‘gentium basic’, serif;
}

#content .post {
font-family: quattrocento, ‘gentium basic’, serif;
}

input[type=”email”], textarea {
line-height: 35px;
font-size: 16px;
font-family: ‘life savers’, ‘gentium basic’, serif;
}

.widget-title {
font-family: ‘life savers’, ‘gentium basic’, serif;
font-size: 30px;
font-weight: bold;
}

.widget {
font-family: ‘life savers’, ‘gentium basic’, serif;
font-weight: bold;
}

.nav {
font-family: ‘life savers’, ‘gentium basic’, serif;
}

#access li {
font-family: ‘life savers’, ‘gentium basic’, serif;
font-weight: 900;
}

.recipe {
font-family: ‘life savers’;
font-weight: bold;
font-size: 18px;
}
}

.recipe-title {
font-family: ‘life savers’;
font-size: 36px;
font-weight: bold;
}

.recipe-author {
font-family: ‘life savers’;
font-weight: bold;
font-size: 18px;
}

.recipe ol {
font-family: ‘life savers’;
font-weight: bold;
margin-bottom: 5px;
}

.recipe ol li {
margin-bottom: 40px;
}

#recipe {
border: 2px solid #000000;
padding: 10px;
margin-bottom: 20px;
}

Thanks! 🙂

[Theme Horse Support Team]

Hi Sarahadams,

Please do create the child theme before customizing the theme.
To create the child theme create a child theme directory (clean-retina-child) under this folder create style.css and paste the below code:

/*
Theme Name: Clean Retina Child
Theme URI: https://www.themehorse.com/themes/clean-retina
Author: Theme Horse
Author URI: https://www.themehorse.com
Version: 2.0.1
Text Domain: cleanretina
Template: clean-retina
*/

@import url("../clean-retina/style.css"); 
@media only screen and (max-width: 767px) {
your custom css goes here
}

Note: Please add your Custom CSS code in above text ‘your custom css goes here’

Thank you!

[Author]

Posts