CSS changes I can't make

HTML & CSS
,
1

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.

2

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.

3

@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.

2 Likes
4

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.

5

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

6

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

7

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.

2 Likes
8

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).

9

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.

2 Likes
10

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.

11

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

12

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

        <script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;
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.async=1;
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');
 </script>
13

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