I’ve been asked to center the logo on our header and to put our company logo on the right side of the header. I can get it to work, but it’s not responsive. When I put it on a smaller screen, the centered logo hangs off the side of the screen, and the company logo seem to be outside of it’s intended area. Any ideas on how to make this work and be responsive?
And here is what it looks like currently on mobile:
It doesn’t have to look exactly like the first one on mobile. I understand we’re dealing with less real estate so we may need to move things closer together, I’d be ok with the logo’s being pretty much side by side on mobile. I just can’t have the second logo outside the dark grey box like that.
Do you remember the basic requirements for a “working page”?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- add other relevant meta tags and links here -->
<title>my title</title>
<script> if appropriate </script>
<style>
/* Relevant CSS here */
</style>
</head>
<body>
<div class="outer"> <!-- outermost page element here. -->
<div>
<nav class="navbar">
<div>
<button type="button" id="sidebarCollapse" class="togglebutton btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-center"></i>
</button>
</div>
<div class="logodiv">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index"><img class="logo" id="logo" src="/images\Maintenance-Center.png" alt="SC2 Logo" /></a>
<a><img id="sc2logo" src="/images/SC2_Logo_1ColorWhite_NoTag.png" /></a>
</div>
</nav>
</div>
<main> not used at this time </main>
<footer> not used at this time </footer>
<script> <!-- onpage scripts here --> </script>
</div> <!-- end of outermost page element -->
</body>
</html>
It is important that the resources called by the code on the page be accessible. The images or scripts or framework should include full URL’s so this “working page” can get to them.
img tags should contain alt text, width and height attributes with size values; etc.
The “working page” should work for us. It should demonstrate the problem so we can see exactly what you see. And it should be valid.
If you would like to post a true “working page” demonstrating the issue, and describe in detail how the page is supposed to behave, someone here will be glad to work with you.
You’ve made it 100% wide with a margin-left of 40%. That makes it take up 140% of the available space and of course 100% is the limit so the extra 40% must overflow somewhere else. You cannot have more than 100% of anything and still have it fit in a box.
You’ve made that same mistake a few times not to mention the extra padding in there also.
If you want something in the perfect middle and two various width elements either side then you would need to ensure that the side elements take up the same amount of space and then you can easily centre the main logo via normal means.
As a starting point I would do something like this with flexbox:
You could do the same without flex and absolutely position the left and right elements to the edges and auto center the static logo (margin:auto). You would need to protect the left and right elements with padding or adjust with media queries when overlaps may occur.
As it is you do not really give enough information for a full solution as we don’t have the image sizes you are using or indeed whether this is actually a frameworks such as bootstrap 3 or 4.
The more info you can supply or indeed set up a codepen demo like this:
It takes only a few minutes to set up a demo that explains your problem more precisely.
Yea… that’s what everyone keeps saying but I have yet to be able to successfully create a working codepen that turns out how my website looks. Anyways, I think you’ve explained enough for me to figure it out. Thank you.
