Hello Animesh,
You’re completely right! But it’s this Additional CSS below which is messing up my footer on live site on desktop:
@media (max-width: 991px) {
.nav-bar .module-group .module.search-widget-handle {
display: none;
}
This was given to me yesterday via the forum ticket support to sort another issue I was having which it sorted (getting rid of the magnifying glass search icon on my mobile / tablet version of the site).
I have temporarily taken it out, and the footer appears as it should.
Is it possible to keep this as it sorts my magnifying glass issue out and have additional CSS to display the footer as it should for live desktop?
Thank you so much again – you have been a superstar helping me!
Victoria
Hi Aminesh – ignore my last message. I was missing a closing brace in the media CSS I had used which was stuffing up our lovely footer! So live site is now reflecting the Customiser which is great :0)
Please can you show me which part of my current CSS manages the padding between the social media icons and the copyright text? I have tried changing various fields but to no avail.
Also, how do I get the footer nav to feature all to the left as a list for mobile and tablet.
Thank you again, Victoria
Hi @victoriagreenphotography
Note: In all CSS below increase or decrease value according to your needs.
1. If you want to increase or decrease the equal gap between menu and social media icons + social media icons and copyright text then you should apply below CSS:
#colophon .widget {
margin-bottom: 100px;
}
2. If you want to manage the padding between the social media icons and the copyright text ONLY then you should apply this CSS:
#colophon .site-info {
margin-top: 10px;
}
Bonus: Additionally, if you want to manage the padding between the social media icons and the menu ONLY then you should apply this CSS:
#colophon .widget ul {
margin-bottom: 50px;
}
Also, how do I get the footer nav to feature all to the left as a list for mobile and tablet.
I think you want something like this: https://prnt.sc/snwfv4, for both mobiles and tablets ONLY. Right?
Please apply this CSS:
@media (max-width: 768px) {
#colophon .widget ul li {
margin-right: 10000px;
padding-top: 0;
display: block;
margin-bottom: 0px;
}
#colophon .widget ul {
margin-bottom: 50px;
} }
Hello Animesh – this is all fantastic! Thank you so much for supplying this – so helpful and it looks brilliant.
I just have one question left – on the mobile version of my site, the copyright text doesn’t span the whole width which would look a lot better. How can I achieve this please?
Thank you so much – really appreciate everything you have done for me.
Best wishes,
Victoria
Hi @victoriagreenphotography
I think you want copyright text to be in the middle of the screen.
Please apply this CSS:
@media (max-width:768px) { .copyright-text {
margin-left: 69px;
} }
It will bring copyright text in the middle, like this: https://prnt.sc/soizdp 🙂
Hello Aminesh – have applied this, that is great thank you. But I would also like it to run the full width of the screen centralised, so it isn’t running across 7 lines like it is at the minute!
Thank you again – you couldn’t have been more helpful!
Victoria
Hi @victoriagreenphotography
You want to cover the left and right gaps for copyright text. Right?
Please apply this CSS:
@media (max-width:480px) {
.copyright-text {
margin-left: 0px;
margin-right: 50px;
} }
It will make it appear like this: https://prnt.sc/soo69h 🙂
Hurrah! My footer looks perfect for mobile – thank you!
I have just been doing some final tests with my footer checking on desktop, tablet and mobile…
I noticed that if I have it on desktop but my browser isn’t full width, the copyright copy can sometimes drop onto two lines in an awkward way, like this….
Victoria Green is a professional wedding photographer based in Tonbridge, Kent. All images © Victoria Green / Victoria Green Photography
How do I add additional CSS please so when it can’t fit onto one line on desktop the line breaks and it reads as the below centred:
Victoria Green is a professional wedding photographer based in Tonbridge, Kent.
All images © Victoria Green / Victoria Green Photography
Thank you again Aminesh – you have been so supportive!
Victoria
Hi @victoriagreenphotography
You have two options.
Either to display them in one line and it will break line according to the device width.
Or, You can use <br> tag to separate both lines for all devices.
You can edit the line like this for all devices:
Victoria Green is a professional wedding photographer based in Tonbridge, Kent.<br>All images © Victoria Green / Victoria Green Photography
And it will display like this: https://prnt.sc/sou9mo
No CSS needed for that. 🙂
Hello Animesh,
That has worked a treat, as per your link, for desktop.
I just added the <br> to ‘Footer’ in Appearance>Customizer. Assume that’s where you wanted me to add it in?
However, it doesn’t keep to this for tablet and mobile if you have a look.
Thank you, Victoria
Hi @victoriagreenphotography
Can you please share the screenshot where you have placed those texts in the Customizer and how it is looking from backend?
Hello,
Here is the <b> in Appearance>Customizer>Footer:
https://prnt.sc/soxv9v
As I mentioned it works great as a sentence separator when the desktop is wide, but when it’s reduced in width and on tablet and mobile, it looks like this (not two separate sentences with a break):
https://prnt.sc/soxwj6
Hope this helps!
Thank you, Victoria
p.s. you mentioned about the backend, I haven’t done anything in the Additional CSS just so you know :0)
Hi @victoriagreenphotography
Please remove that <br> tag and edit the text like this:
Victoria Green is a professional wedding photographer based in Tonbridge, Kent.<div></div>All images © Victoria Green / Victoria Green Photography
It should work. 🙂
Hurrah!!!!! It is sorted :0)
Thank you so much for your patience and perseverance helping me.
My footer looks amazing now thanks to you!
Have a great Aminesh. Really appreciate your ongoing help,
Victoria
