Hi there,
You will need to add some custom CSS to change the font of your read more button.
Install and activate this plugin then go to “Add Custom CSS” on your dashboard and paste this
.read-more{
font-family:"Neucha", cursive"
}
in the box.
To increase the size of your menu items check this thread https://wordpress.org/support/topic/increase-font-size-menu-writers-olsen-light/
Paste this
header .site-bar {
margin-bottom: 30px;
}
footer .site-bar {
border: none;
}
to remove the gray line from the bottom and add some spacing between your navigation and your latest post.
Also have a look here to change the footer text https://wordpress.org/support/topic/footer-text-11/ to any text you want.
There are not really any recommended dimensions but you can make your logo smaller in mobile only by pasting this
@media(max-width:768px) {
.site-logo img {
width: auto;
height: auto;
}
}
in your custom CSS box. This will make it look not stretched.
Let me know if this helps
Hi Fotis,
Thanks so much for your prompt response, however none of this worked except the footer text :(.
I tried refreshing and clearing my cache but still the same. Could it be because I may have too many codes or some that overlap in my custom css? I’m getting really confused now. This is everything in my CSS rules on Add Custom CSS.
.socials .fa {
color: #0099ff;
}
.socials li a{
font-size:20px;
}
.entry-utils .socials { display: none !important; }
a:hover, a:focus {
color: #0099ff;
outline: none;
text-decoration: none;
header .nav ul >li > a {
font-size: 25px;
}
header .site-logo h1 {
font-size: 32px;
}
header .site-logo p {
font-size: 20px
}
.page-id-564 header{
margin-bottom: 20px;
}
.nav { font-size: 20px; }.
.navigation a {
font-size: 25px;
}
.navigation > li > a {
margin-right: 20px;
}
.site-logo p {
font-size: 30px;
}
.read-more{
font-family:”Neucha”, cursive”
}
header .site-bar {
margin-bottom: 30px;
}
footer .site-bar {
border: none;
}
@media(max-width:768px) {
.site-logo img {
width: auto;
height: auto;
}
}
header .navigation li a,
header .navigation li ul a {
font-size: 15px;
}
Are there items I need to take out in order for these to work?
Many thanks
Hi there,
you have a few CSS errors that prevent all rules to render correctly.
Try replacing your custom css with this
.socials .fa {
color: #0099ff;
}
.socials li a {
font-size: 20px;
}
.entry-utils .socials {
display: none !important;
}
a:hover,
a:focus {
color: #0099ff;
outline: none;
text-decoration: none;
}
header .nav ul >li > a {
font-size: 25px;
}
header .site-logo h1 {
font-size: 32px;
}
header .site-logo p {
font-size: 20px
}
.page-id-564 header {
margin-bottom: 20px;
}
.nav {
font-size: 20px;
}
.navigation a {
font-size: 25px;
}
.navigation > li > a {
margin-right: 20px;
}
.site-logo p {
font-size: 30px;
}
.read-more {
font-family: "Neucha", cursive;
}
header .site-bar {
margin-bottom: 30px;
}
footer .site-bar {
border: none;
}
@media(max-width:768px) {
.site-logo img {
width: auto;
height: auto;
}
}
header .navigation li a,
header .navigation li ul a {
font-size: 15px;
}
and let me know if it works.
Thanks so much!
This all worked great except that my logo is still stretched on mobile devices.
Thanks
Gemma
Hi there,
You still have some syntax errors so replace you custom css with this
.socials .fa {
color: #0099ff;
}
.socials li a {
font-size: 20px;
}
.entry-utils .socials {
display: none !important;
}
a:hover,
a:focus {
color: #0099ff;
outline: none;
text-decoration: none;
}
header .nav ul >li > a {
font-size: 25px;
}
header .site-logo h1 {
font-size: 32px;
}
header .site-logo p {
font-size: 20px
}
.page-id-564 header {
margin-bottom: 20px;
}
.nav {
font-size: 20px;
}
.navigation a {
font-size: 25px;
}
.navigation > li > a {
margin-right: 20px;
}
.site-logo p {
font-size: 30px;
}
.read-more {
font-family: "Neucha", cursive;
}
header .navigation li a,
header .navigation li ul a {
font-size: 15px;
}
header .site-bar {
margin-bottom: 30px;
}
footer .site-bar {
border: none;
}
@media(max-width:768px) {
.site-logo img {
width: auto;
height: auto;
}
}
And let me know if this helps
Hi,
The only thing this has done is make the colour of my font appear differently on mobile devices.
Thanks
Gemma
Hi there,
please replace
@media(max-width:768px) {
.site-logo img {
width: auto;
height: auto;
}
}
with this
@media(max-width:768px) {
.site-logo img {
width: auto!important;
height: auto!important;
}
}
in the previous code.
WordPress 4.7 added a special section for your custom css(Appearance->Customize->Additional CSS) that renders that just after the plugin’s custom css bypassing its rules.
You can use either the plugin or the native WordPress choice.
Hey,
Thank you that has worked!
At some stage of doing this something has happened and the font now appears a different colour on mobile devices, but it’s ok not a big deal.
Thanks for all your help.
Gemma
Hi there,
Glad I could help!
I’d like to ask you, if you like the theme and could take a minute to review it here it would help us a lot!
In which font are you referring?
Yes I will do the review.
In regards to the font, I’ve just realised that the hover colour and normal display colour seemed to have switched? For example if you look at my page all writing such as menu, post titles etc should be the same colour as my social icons. However, they have turned a dark navy blue and only go the correct colour when hovered over. I don’t think I have changed anything to do with colour so not sure why this has happened.
One last thing (I promise) when I visit my site on a mobile device and click menu from the home page, my tagline overlaps my menu. Is there a way to hide this?
Thanks again
Gemma
Hey,
I yet again need assistance, (sorry!). My footer map is covering the comment section on my blog posts. How do I stop this from happening? It’s fine on my home page.
Also, I’ve just realised that the hover colour and normal display colour seemed to have switched for the font. For example if you look at my page all writing such as menu, post titles etc should be the same colour as my social icons. However, they have turned a dark navy blue and only go the correct colour when hovered over.This should be the other way around! Helllllp please 🙂
Thanks in advance
Gemma
Hi there,
can you paste this
#site-content .col-md-8,
#site-content .col-md-4 {
height: auto !important;
}
in your custom CSS box to fix the map issue.
Also add this
a,
a:hover,
a:focus,
a:visited {
color: #0099ff;
}
to make all anchors have the same color.
Use this to fix your mobile menu issue
.mm-navbar {
height: auto;
position: relative;
}
.mm-panel.mm-hasnavbar .mm-navbar {
position: relative;
top: -20px;
}
.mm-menu > .mm-panel:before {
height: 0;
}
Let me know if this helps
-
This reply was modified 9 years, 3 months ago by
Fotis.
Thanks so much!
This is all great, except that when I go on my menu on a mobile device, my tagline still covers part of the menu (better than it was though).
Gemma
Hi there,
I cannot see it overlapping (https://goo.gl/R8z2Ym). Can you clear you browser cache and recheck?
