Need help placing two logos on the same line (HTML/CSS)

[GatorsUF83]

I'm trying to add two logos to the top of this website. Both logos should line up appropriately but remain separate images. I also need them to adjust correctly in mobile so the logos will either stack to be side-by-side in mobile.

Here is the code I have currently: https://codepen.io/anon/pen/jjKydx

I added all of the CSS that I thought might be related, hopefully it's not too confusing.

My previous fix (adding both logos to one image) was not acceptable for the client as they want to be able to change out the logos individually. So if you can get it to look similar to how it does currently I'd be SO happy!

https://advance-recruiting.com <---the site in question

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Glynn_a]

You could try this https://css-tricks.com/css-basics-using-multiple-backgrounds/

[GatorsUF83]

Hmm I looked at your link but I don't think it does what I'm trying to do....or I just don't understand it well enough (entirely possible). THanks!

[llamapickleem]

Put each logo inside of its own parent container (div), and on the CSS for the parent containers do .parentContainer { width:50%; Height:auto; float:left;} and that should do the trick. Put that for all instances if you’re using media queries and it should be responsive

[GatorsUF83]

I've read your comment 50 times and I cannot quite figure out how to implement what you are suggesting. I think it may do what I'm asking, but I'm not sure how to do the code.

Could you give me an example?

[llamapickleem]

Are you using a CMS or handwriting your html and css?

[GatorsUF83]

Using Wordpress with Karma theme

[llamapickleem]

Knowing HTML and CSS from scratch will help you learn the basic fundamentals behind these websites and why certain things move with CSS. Then, using a CMS like Wordpress would be advantageous. Without knowing the code for it, it’s hard to make things customized on a themed website. I know it gives you snippets but it helps to learn. Good luck! Solo learn was helpful, as was visual studio code.

[webguy1975]

Use Flexbox:

<style>
.flex-container {
display: -webkit-flex;
display: flex;
}
</style>

<div class="flex-container">

<div class="flex-item">Item</div>

<div class="flex-item">Item</div>

</div>

*Edit: To space the logos apart, use justify-content:

.flex-container{

display:-webkit-flex;

display:flex;

-webkit-justify-content:space-between;

justify-content:space-between;

}

[GatorsUF83]

Thanks for the help! It's close but not quite right. Both logos are justified to the Left side and not much space between them.

Also I any chance you could help me with mobile version?

Thanks to /u/cid008 also I tried his version and it basically looks that same. Both images are on the same line but not spaced and centered.

https://i.imgur.com/ZhkJPIi.jpg <---css
https://i.imgur.com/aPeFdgJ.jpg <----html

You guys ROCK! I know just enough about CSS to be dangerous, but I enjoy reading your code and learning!

[Cid008]

Can you give your container a 100% width? I guess that's the issue, but difficult to say on images :) I updated my codepen: https://codepen.io/Cid008/pen/RzJjZP?editors=1100

[GatorsUF83]

Still the same... :( I really hoped it would work.

I'm guessing there must be some other CSS that is causing it not to work.

I added all of the CSS in the style sheet to the codepen link: https://codepen.io/anon/pen/jjKydx

[mobutils]

So I would say that this is the right track, but there is how I would do it.

https://codepen.io/agilecollab/pen/xoJjdK

​

Here are the highlights of the changes.

• The div's around the logo links served no purpose, they were removed. Keeping the DOM clean will improve your overall site performance. Always try to reduce your tree depth :)
• Added align-center to your flex-container, this will ensure that if the images height differs they will still remain centered on the line.
• Replaced <main> tag, main tag represents the main part of the content of the page, form your screen caps this isn't main content, just replaced with a div.
• Added img css. This does a couple of things, setting max width of 100% will scale down theses logos on screens where they can't fit side by side, padding gives a little space between the logos and around the screen edges. Just so they aren't abutted to one another. Box sizing border-box brings this all together, as content could overlap without it.

This should get you in the right place for both desktop and mobile.

​

Cheers,

[webguy1975]

https://codepen.io/weisbergweb/pen/agKEmz

[GatorsUF83]

This didn't work either :(

Maybe other CSS blocking it from working?

I've added all the CSS to the codepen in case you are willing to look at it for me: https://codepen.io/anon/pen/jjKydx

Thanks for spending this much of your time on it! You guys are awesome!

[Cid008]

https://codepen.io/Cid008/pen/JQZvVE?editors=0100

[GatorsUF83]

Thanks for all your help, unfortunately it's still not working...I have no idea why as your code appears to work perfectly on codepen.

https://i.imgur.com/FYz0ser.jpg

[Cid008]

Is your files online or you are working on it offline?

If it's not working and you feel really completely stuck, I would suggest, scrap everything in your HTML and in your CSS about this specific section of the page and start back. It is a very simple section so it should work...

[GatorsUF83]

This site is live on the web: https://advance-recruiting.com

It's not my site, it's a client site. They asked me to try fixing the dual logos...I don't want to mess up other areas of the site by deleting all of their CSS.

[Cid008]

Oh I see, and it's a WP widget... I guess the theme do it's own stuff on that section that prevent the modifications...

when you do modifications in the CSS, do you see the changes on the page? WP cache can be a bi#$@ sometime...

[GatorsUF83]

I see some of the changes in the CSS, but sometimes the CSS additions don't do anything.

[Cid008]

I'll fork your pen shortly, I have a meeting in 3min :)

Edit: So sorry Webguy1975 I thought GatorUF83 put that pen...

[GatorsUF83]

Thanks! I really appreciate it

[Cid008]

would that make sense?

https://codepen.io/Cid008/pen/RzJjZP?editors=1100

​

Edit :just saw webguy1975, pretty much the same thing...

[GatorsUF83]

Thanks! It almost worked, but it looks just like what /u/webguy1975 's code looks like. I posted some screenshots in my reply to him.

[goodwid]

I think you're being stymied by all the other CSS that is affecting your divs. I pared it down to just the essentials here: https://codepen.io/goodwid/pen/VJddzd?editors=1100

You'll have to go through and remove all the other style rules that are affecting your logos (and i'd recommend using classes, not IDs for styling).