draw ‘til you’re soreWelcome to the bog of Jessica Amber. Herein you’ll find my life, whatever Irandom stuff ’m getting up to. It’s usually creative.
Unmaintained since 2019. Please go to www.jessicaamber.com.au This site contains affiliate links.
|
I am currently using the Paper theme for this Weebly blog o'mine. The existing archives list on this theme (and potentially on others), is vertical. I feel like it takes up more screen real estate than necessary. I set myself a little HTML/CSS mission to see if I could code a way to make the list horizontal instead
The Categories list directly below the Archives list is already horizontal, so I know that what I want to do is achievable.
In case this is your first time coding for Weebly, here's the steps to get to the code editing area of Weebly:
With just a bit of CSS coding, we can make this list of links go horizontal. I also added some padding, as I didn't like how the list elements touched. And, I made the Archive items have their text centre-aligned.
//Stop archives listing as a vertical stack taking up valuable screen space
And here's the result:
The only downside is, as your months and years of activity increase, this list will keep on spanning right, making the user need to scroll left and right on the screen. Not ideal. So let's fix that. Add the following text right after display:flex :
flex-flow:wrap;
Changing the flex flow to wrap (nowrap is default) will make the content flow onto the next line once it reaches the end of the line. See the result below:
What other tweks would you make to the Archives list? What aspects of Weebly themes really grind your gears? Leave a comment, let me know!
✌ Peace, ❤ Love and ☀ Sunshine
0 Comments
Leave a Reply. |
AuthorI'm just some Aussie 20-something year old with a lot of time and a lot of interests. Archives
July 2019
CategoriesAll Art Art Freelancing Business Cosplay Food Law Of Attraction Makeup Organizing Sewing Shopping TAFE Technology Web |