Admin 3
Previous template was not responsive so no good for mobile phones.
Installed another responsive theme Baskerville, then added a Child theme to it for modifications on a second folder, testsite. After a few changes tested it on a smart phone and all appears to be in order.
The main changes done to the site are in the Appearance – Themes – Customise – Additional CSS section as follows………..Note the last item was solely to make the Contact Form more visible on the phone size.
Some items written for the earlier template could be removed.
/* change headings to red */
a, h1 a, h2 a, h3 a, h4 a {
color: #cc1414;
}
.myhead {
background-color: rgba(3,3,3,0.8)!important;
}
.bg-dark {
background-color: rgba(3,3,3,0.8)!important;
}
.header .cover {
background-color: rgba(3,3,3,0.8)!important;
}
.bg-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.elementor-container {
max-width: 1140px;
background-color: rgba(224,224,224,0.8)!important;
}
.bg-graphite {
background-color: transparent;
}
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
padding: 0px;
}
section-inner {
max-width: 90%;
width: 1400px;
margin: 0 auto;
background-color: rgba(224,224,224,0.8)!important;
}
body a {
color: #cc1414;
text-decoration: none;
}
p {
margin: 0 0 15px;
line-height: 1.7;
}
.searchform {
background-color: #444;
float: right;
position: relative;
right: 12px;
top: 0;
width: 200px;
border-radius: 0;
color: #ffffff;
line-height: 20px;
margin: 0;
min-height: 20px;
}
.searchform {
margin: 0 auto;
max-width: 320px;
position: relative;
}
masthead {
}
site-header {
}
article, aside, details, figcaption, figure, footer, header, main, nav, section {
clear: both;
display: block;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
}
body, button, input, select, textarea {
color: #333333;
font-family: ‘Lato’, sans-serif;
font-size: 16px;
line-height: 1.5;
}
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
}
html {
font-size: 10px;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}
/*search in header */
.searchform {
background-color: #444;
float: right;
position: relative;
right: 12px;
top: 0;
width: 200px;
border-radius: 0;
color: #ffffff ;
line-height: 20px;
margin: 0;
min-height: 20px;
}
.searchform input[type=”submit”] {
background-color: transparent;
border-radius: 0;
font-family: fontawesome;
font-size: 18px;
line-height: 1;
padding: 1px 5px;
position: absolute;
right: 0;
top: 0;
color: #F8F8FF ;
}
input[type=”text”], input[type=”password”], textarea, input[type=”email”], select {
color: #fff!important;
line-height: 20px;
margin: 0;
padding: 0;
min-height: 20px;
width: 100%;
background-color: #444;
}
/*socials in header */
socials {
}
/* Content part transparent */
content {
}
.container .site-header {
min-height: 4px;
padding: 0;
background-color: transparent!important;
}
/* change paragraph color */
p {
color: #262626;
}
/* reposition arrow up */
.fa-chevron-circle-up::after {
background: #ffffff none repeat scroll 0 0;
content: “”;
display: block;
height: 17px;
position: absolute;
right: 4px;
top: 15px;
width: 22px;
z-index: 11;
}
page.hfeed.site.container {
}
.container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
/* sub-menu change background to match main */
site-navigation ul ul {
}
/* main menu */
site-navigation {
}
site-navigation ul li a {
}
site-navigation li {
}
/* uses blue colour */
site-navigation li.current_page_item a, #site-navigation li.current-menu-item a {
}
/* copyright line / .container #footer-nav, .container #colophon { margin-left: 0; margin-right: 0; } / make partly transparent*/
footer-nav ul li a {
}
footer-nav {
}
footer-nav ul {
}
/* make partly transparent/ /to add special menu to footer and change size*/
.wpautoterms-footer {
background-color: rgba(224,224,224,0.8);
margin-left: auto;
margin-right: auto;
width: 1170px;
}
ol, ul {
margin-top: 5px;
margin-bottom: 5px;
}
/* make partly transparent/ footer#colophon { background-color: rgba(224,224,224,0.8); margin-left: auto; margin-right: auto; } / mailchinp partly transparent */
mc_embed_signup {
}
label {
color: #262626;
background-color: #1DCD95;
}