Archived topic
Footer widget background image size issue
7 replies · Started by Alice on June 4, 2018
I have hard time adjust background image size for footer widget so that it can show on both laptop and phone nicely. If I don't set it to 'Repeat', then it leaves a blank area on the right; if I set it to 'Repeat', the image repeats itself unnaturally with a clear cut border.
I also tried the Size(Auto) and Attachment options to no avail. Please advise.
Hi there,
Background images are tricky to deal with as they aren't responsive by nature (it's not a theme thing).
In this case the main problem is that your background image isn't large enough for the full container width.
I would recommend uploading an image for desktop, something around 1920px in width and 400px in height.
Then we can have another look to see what we can do for mobile.
Let me know if this helps :)
I changed the resolution to 1920 width, and now the laptop version works. Thank you.
The mobile version is fine too as far as the widget goes. But I have a footer font question. It seems there is only one font size for all: laptop, tablet, phone all sharing the same footer font size. In my case I have a menu in the footer, and a Copyright message. I'd like to use smaller font size for mobile version than the laptop. Any way to customize them differently?
We would need to use a bit CSS to set the mobile font size:
@media (max-width: 768px) {
.site-info {
font-size: 10px;
}
.footer-bar .widget_nav_menu li {
margin: 0 7px;
}
.footer-bar {
margin-bottom: 10px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
If so, can I also have the mobile CSS to
1. reduce the distance between footer menu items (the gaps are a bit big)
2. reduce the vertical gap between footer menu items and the Copyright line (the footer menu is above the Copyright line on mobile)
Confirmed it is working. Thank you.
No problem :)
