CSS changes I can't make

I made this website using a theme builder, so I am not quite familiar with its CSS/JS.
How can I edit the shape of the bar that contains the years - 2013,2014,2015… etc. in MOBILE view. Desktop version is perfect. How can I edit it in mobile, so its not just a big and ugly rectangle.

I am not sure how to do it (visually) and I am open to suggestions. I think making it a bit smaller and rounding the edges can help.

I know its somewhere in theme-nearblack.css, but I am not sure where and how to edit it.

In the css file http://zavinagizaedno.com/css/theme-nearblack.css on line 4651 is this rule:-

.filters.floating {
	border-radius: 0;
	padding: 8px;

Which removes the border-radius (round corners). You could add a value to that property to get the round corners back, or comment it out.

@vessaka: that page is huge. It takes a long time to load on my broadband connection; for somebody on a mobile connection, that’s an awful lot of data to download for one page.


Thank you! Can you also tell me how can I remove the overlay/fade that sits on the video? The video is more bright/vivid normally, there is some overlay with gray/black at 80% opacity or something.

I will lower the quality of the images, but I already did this and the images go very bad even if they are 15MB in total

About the floating filters - even a radius of 1 make it too curved. How can I scale down the hole thing?

IMHO, you really need to rethink the layout, so you’re not loading everything at once. A few small thumbnails on the home page, to give a flavour of your images, then a separate page for each year, to keep things on a more manageable scale, and give your visitors more control over how much they download, and whether or not they want to view a larger version of a particular image.

Your current design may be attractive an eye-catching, but if it takes so long to load that visitors give up and leave the site, will it do you any good? You need to find a balance between design and usability.


When I edit the width in

  .filters.floating li {
    width: 30%;
    float: left;
    margin: 0;

they are not centred (depending on screen size, but not universal).

The website acts like a present for my girlfriend. There won’t be many people visiting it anyway (maybe 15-20 hits per year except her) and I know she has no problem in its size, in terms of fast hardware and unlimited metered connection.


In this file http://zavinagizaedno.com/css/theme-nearblack.css line 4117

.overlay .fs-vid-background::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #222222;
	opacity: 0.5;
	z-index: 2;

That is the overlay, change the opacity, background or remove altogether.

I manage to do it on my own, thank you.

You may want to remove this to not risk her becoming disappointed when she sees low numbers.

i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
a=s.createElement(o), m=s.getElementsByTagName(o)[0];
a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 ga('create', '88972532', 'auto');
 ga('send', 'pageview');

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.