Hello,
Please could some one help me reduce the amount of white space between the banner space and text area by writing some code for me? I’d really appreciate it. I’m using the theme Artful on Rapidweaver Classic. I’m thinking 40px space between text and and the line would be a little better? It’s particularly bad on the homepage.
https://deborahgriceartist.uk/
Hi @Pipspaws,
There’s a Spacer stack in that spot. You could simply reduce the size of that to reduce the white space.
Cheers,
Erwin
Hi Erwin,
Many thanks for your reply.
I’ve just had a look and can’t see a spacer in that position. Here is a screen grab of the stacks as they are…
I have some code that @teefer helped me with a couple of years ago for an older verison of my website, would this be interfering? I’m sorry, I don’t no anything about code you see and I’m a relative novice with RW. Maybe I should just delete all this if it is redundant?
#feature {background-image: url(%resource(benediction1000x400banner.jpg)%);}
#padding .message-text { font-family: 'Raleway'!important; }
section #padding {
text-align: left;
}
Many thanks,
Debbie
Oh sorry, you meant the bit above “About Deborah’s work”, while the Space stack is positioned below that paragraph.
There’s currently a bottom padding of 48px set for the hero banner, so it’s up to you how much you’d want to subtract from that. A lower value is less white space:
.hero {
padding-bottom: 48px;
}
You paste this code here:
Cheers,
Erwin
1 Like
Hi Erwin,
I popped that code in the correct place and nothing has changed…is it something I am doing wrong? I’ve uploaded the site so maybe you can see what I’ve done wrong there…
Many thanks,
Debbie
You could try to additionally put an “!important” behind the pixel value. So then the code would be:
.hero {
padding-bottom: 48px !important;
}
Thanks so much Matthias, that’s improved things a lot. Please would you be so kind to write me some code to reduce these two white spaces that I’ve marked with the arrows as well? They’re just look a little bit too big…
Best wishes, Debbie
Hi Debbie,
here’s the complete css code to control everything you wanted:
/* Spacing underneath the hero banner */
.hero {
padding-bottom: 48px !important
}/* Spacing underneath the navbar */
nav.navbar.navbar-expand-lg {
margin-bottom: 60px
}/* Spacing above and below the horizontal divider */
hr.my-5 {
margin-top: 20px !important;
margin-bottom: 10px !important
}
Just play with the values and see what happens… 
Best wishes,
Matthias
2 Likes
Matthias, that is triumphant - thank you. It looks so much better!
I really appreciate your help.
1 Like
Hi Matthias,
I’m sorry to bother you again.
I’ve just noticed that my typeface of choice ‘Oswald’, isn’t loading on my phone and its showing a serif based typeface. I am aware of websafe fonts, but what with the typeface loading ok on my laptop I thought I was ok. Is there anything I can do, perhaps find an override for a sans serif type face if Oswald won’t load on certain devices?
(Sorry if I’m not using the correct language.)
Thank you in advance, Debbie
Hi Debbie.
I don’t see any font-settings in the Artful theme. So it would be interesting to know how you got the ‘Oswald’ typeface into your site. Via css-code or by one of the many stacks capable of doing this…? Do you host the font on your ftp-server (where your site resides) or do you reference it from Google?
Hi Matthias,
Thanks very much for your reply.
With in Rapidweaver, when I click on the font options I get the standard, limited choice. So as a work around, I highlighted the text and right-clicked on it, which gave the opportunity to choose ‘Oswald’. I have no idea where the actual font is ‘held’ with in Rapidweaver…it was just an intuitive manoeuvre which I thought had worked for me; until I checked the site on my phone…
Oops, this ‘method’ definitely cannot work consistently at all. You will either have to link the font directly from Google (Browse Fonts - Google Fonts) if your GDPR-regulations allow it or you will have to download the font from Google, place it on your ftp-server and reference it from there (so your are GDPR-‘safe’). Are you using the Stacks plugin for your pages? If so you could use “FontPro” (Font Pro Stack for RapidWeaver) or “Fontamental” (Fontamental | Stacks4Stacks) to host the fonts on your own ftp-server or a stack like “Fontstack” (FontStack | Stacks4Stacks) if it’s ok for you to load the fonts from Google.
If you are not using the Stacks plugin all this can be done via css, but regarding this I’m ‘out’, since I only use the FontPro stack for many years now to use Google Fonts in my projects.
Hope this helps…
Best wishes,
Matthias
Hi Matthias,
Thank you for your advice. I bought Fontamental but there seems to be a bug in the plugin (the designer is kindly going to help me out there…) So, I downloaded Font Stack which I’m now using with some success. The typeface is not showing site wide and I have no idea how to make that happen. I’m hoping that William will be able to advise me on with that.
Thank you for all of your help - you’ve been very generous with your time and knowledge.
Best wishes, Debbie
Deborah Grice-Tyzack
Mobile: 07930 400405
Instagram: @deborahgrice_art
Website: deborahgriceartist.uk
Hi Debbie,
I was happy to help you. 
And I’m sure Will can help you further on with your font-problem.
By the way: very nice art you’re making!
Best wishes from Germany,
Matthias
Hi Matthias,
Thank you so much for your kind words about my work, I really appreciate them.
Danke nochmal,
Debbie
Deborah Grice-Tyzack
Mobile: 07930 400405
Instagram: @deborahgrice_art
Website: deborahgriceartist.uk
1 Like