MyBB Community Forums

What can I do to get my top bar to fit on all resolutions?

I tried setting max and min widths but then on smaller screens it shows too big and makes the screen go off to the right a bit, not entirely sure what to do. Probably isn't too difficult, but I'm puzzled. If you go to my link and zoom in or out you'll be able to see what I mean.

Link: http://orealm.net/

Example on small screen:

Try remove the max width 1500px and just leave it fluid.

change this code (global.css line: 2733)

.header_solid {
	min-height: 50px;
	max-height: 50px;
	height: 50px;
	border: 1px solid #2a2a2a;
	background-color: #242424;
	width: calc(95% - 30px);
	max-width: calc(1540px - 20px);
	/* min-width: calc(1540px - 20px); */
	margin: auto auto;
}

to this (remove /* min-width: calc(1540px - 20px); */)

.header_solid {
	min-height: 50px;
	max-height: 50px;
	height: 50px;
	border: 1px solid #2a2a2a;
	background-color: #242424;
	width: calc(95% - 30px);
	max-width: calc(1540px - 20px);
	margin: auto auto;
}

(2019-02-17, 10:03 AM)FaridAzhar777 Wrote: [ -> ]change this code (global.css line: 2733)

.header_solid {
	min-height: 50px;
	max-height: 50px;
	height: 50px;
	border: 1px solid #2a2a2a;
	background-color: #242424;
	width: calc(95% - 30px);
	max-width: calc(1540px - 20px);
	/* min-width: calc(1540px - 20px); */
	margin: auto auto;
}

to this (remove /* min-width: calc(1540px - 20px); */)

.header_solid {
	min-height: 50px;
	max-height: 50px;
	height: 50px;
	border: 1px solid #2a2a2a;
	background-color: #242424;
	width: calc(95% - 30px);
	max-width: calc(1540px - 20px);
	margin: auto auto;
}

That just leaves me with this:



It's too small, I need it to be to where it matches the container no matter what size the screen is.So that it's like this no matter the zoom or screen resolution, like so:



How can I achieve this?