Bootstrap - Display Image in Top Bar - html

I've searched the forums, but couldn't find the exact problem.
I'm using bootstrap on a template, and I'm trying to add an image in the top bar ('topbar' - not the navigational bar).
For some reason, the image is never shown.
Here's the code (all the rest besides the image works fine):
<section id="topbar">
<div class="container">
<div class="row">
<div class="col-sm-12 topbar-base no-padding">
<!--Top Bar Block-->
<div class="col-sm-8 col-md-6 topbar-block left text-left">
<ul>
<li><i class="fa fa-clock-o"></i>Mon - Sat: 09.00 - 19.00</li>
<li>Company inc.</li>
<li>**<img src="flag.png" alt="" height="27px" />**</li>
<li><i class="fa fa-phone"></i>+1 929 425 3919 </li>
<li><i class="fa fa-envelope"></i>info#company.com </li>
</ul>
</div>
<!--Top Bar block-->
<div class="col-sm-4 col-md-4 col-md-offset-2 topbar-block text-right">
<ul class="social">
<li><i class="fa fa-facebook"></i> </li>
</ul>
</div>
</div>
</div>
</div>
Thank you very much in advance. I've tried a lot of things, but can't seem to get it to work.
Much appreciated,
Lance

It's probably because the value of the height attribute of your image is 27px. It should be just 27.
From the html5 specification:
The attributes, if specified, must have values that are valid non-negative integers.
By the way, this should preferably stored in a css file.
There is also other errors, like the href attribute href="tel:+1 929 425 3919" which is not valid. Use an html validator to get rid of those errors.

The img tag inside "topbar-block" is referencing an image "flag.png" in the same directory as your .html file is. So make sure the image is in the same folder. The code seems correct otherwise.

Related

Why "index.html#contact" dont move to div with id "contact"?

Code that should get me to div with id "contact":
<a href="index.html#contact" class="w3-bar-item w3-button w3-padding-large w3-hover-black"><i class="fa fa-envelope w3-xxlarge"></i>
div:
<div class="w3-padding-64 w3-content w3-text-light-grey" id="contact">
I this moves me to:
<div class="w3-half w3-margin-bottom"><ul class="w3-ul w3-black w3-center w3-opacity w3-hover-opacity-off"><li class="w3-dark-grey w3-xlarge w3-padding-32">Voice Assistant</li><li><img src="https://opengraph.githubassets.com/08acf1b9b376cf16c3a6ec2b3bcfea4e8ed1e33a3291221dbaf5e18086213795/LudwikZimmenhof/Voice-Assistant" style="max-width: 432px"></li></ul></div>
Website: https://ludwikzimmenhof.github.io/Portfolio/index.html
Github respo: https://github.com/LudwikZimmenhof/Portfolio
Anybody know how to fix it?
You have at least two issues going on:
Since your #projects contains floated elements (float: left;) you need to use something to avoid it to collapse (a clear fix)
A large part of your projects aren't properly inside the #projects div, you current setup is:
<div id="projects">
<div id="project-1"></div>
<div id="project-2"></div>
<div id="project-3"></div>
</div><!-- the project div end here -->
<div id="project-4"></div>
<div id="project-5"></div>
<div id="project-6"></div>
PS: There is also an issue with your CSS reset:
I aggree with #Ben Souchet but if you want to fix it and you dont know how to resolve completely. You could point to this section for now...
Also: You can loose the 'index.html' in your href parameters ;)
Contact Info section

Can anyone tell me why my paragraph links are unclickable?

I have two anchor tags that are not clickable for some reason. One link should open up so clients can send me an email to my email address. The other link should open up a phone or app so clients can contact me via phone.
I cannot figure out why only these two links are not working. I am using a bootstrap template so maybe there is something in this section (jquery?) that is preventing the links from working as they normally would. The icons in the unordered list in the same section don't seem to have this issue.
<section class="ftco-section about-section">
<div class="container">
<div class="row d-flex" data-scrollax-parent="true">
<div class="col-md-4 author-img" style="background-image: url(images/author-1.jpg);" data-scrollax=" properties: { translateY: '-70%'}"></div>
<div class="col-md-2"></div>
<div class="col-md-6 wrap ftco-animate">
<div class="about-desc">
<h1 class="bold-text">About</h1>
<div class="p-5">
<h2 class="mb-5">Hi! I'm Matthew Mullins</h2>
<p>I thrive working on large, commercial, information heavy site designs. I have an emphasis on ease of use & simplicity. My idea of great visual design: when it enhances the user experience, & doesn't get in the way.</p>
<ul class="ftco-footer-social list-unstyled mt-4">
<li><span class="icon-behance"></span></li>
<li><span class="icon-dribbble"></span></li>
<li><span class="icon-instagram"></span></li>
<li><span class="icon-google"></span></li>
</ul>
<p>Email: example#gmail.com</p>
<p>Phone: (442)-224-4005</p>
</div>
</div>
</div>
</div>
</div>
</section>
I was expecting the links to open up to their respective locations. Instead, the text is blue but the mouse does not indicate there is a link underneath.
Posting my comment as an answer:
Seems to be something with the CSS on your links, as it works in the example you gave. Try setting cursor: pointer; on those links, which should show that they are clickable links.
Something in your Bootstrap or other styles must have been overriding the default cursor as pointer on link elements.

Bootstrap 4 row not center aligned

I have a bootstrap row, with 4 columns in it. Originally I had 3 columns with icons, and they all aligned perfectly. I added a fourth in, and now the new one I added is slightly further down the page than the rest. It just doesn't sit in line
<div class="col-12 padding">
<h3>Also take a look at my Github, Free Code Camp, Team Treehouse and LinkedIn profiles!</h3>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-github icons"></i>
<h4>GitHub</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-free-code-camp icons"></i>
<h4>Free Code Camp</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fi-social-treehouse icons"></i>
<h4>Team Treehouse</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-linkedin icons"></i>
<h4>LinkedIn</h4>
</div>
It's the third column (team treehouse) that doesn't sit in line with the rest.
Also, they are all within a row div, it's just not shown.
EDIT:
It seems the problem is 3 of the icons are from Font Awesome, and the Treehouse icon is from Foundation Icons. Now I know the problem, but im not sure how to fix it. They are all styled to the same size
If you believe it is the icon, test your theory by adding a border to the icons class. This way you will be able to tell if the third icon is positioned oddly, or has padding built into the image itself. If that is the case copy the image and edit it to suit.
Or you can hack the offending icon with some CSS like so:
.fi-social-treehouse {
margin-top: -20px;
}
Well, I checked inside the CSS sheet for Foundation Icons and compared it to the CSS sheet of Font Awesome, and couldn't find a difference. So I ended up hard coding a negative margin to the column that the treehouse icon is within. If anyone has a better solution, I would be happy to hear it!

CSS thumbnail with icon overlay

So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.
EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test/test04.png" alt="thumb01">
<div class="col-xs-3 col-md-6">
<div class="delivery alert alert-success">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
Delivery class:
.delivery{
position: absolute;
font-size: large;}
Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use #media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card, search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div, then just work with the elements using CSS (display and the float, for example). Have fun :)

Two auto width flexbox columns with only one that wraps

I have two auto width flexbox columns displayed inline. I expect to have dynamic content in the columns so I am trying to figure out a way to wrap only the first column which contains the menu items.
I know I can wrap both of them using the "flex-wrap" class on the "d-flex" div but I only want to wrap the first auto width column while keeping the two columns inline of each other.
I am using Bootstrap 4 CSS which already contains the flexbox classes I am using, please see an example on the fiddle I've provided.
My desired result would be something like this image example:
https://jsfiddle.net/j9v70qvy/
<div id="header-middle">
<div class="container">
<div class="row align-items-center">
<div class="header-middle-mobile-menu-outer col col-auto hidden-md-up">
<a class="header-middle-mobile-menu-toggle">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="logo-outer col col-auto">
<div class="logo-image">
<a href="#">
<img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiamcGxuM3VAhUTwWMKHVWaBgMQjRwIBw&url=http%3A%2F%2Fwww.freepik.com%2Ffree-vector%2Flogo-sample-text_701628.htm&psig=AFQjCNEHXsgvhjDI__g4Vk4GETXnCeRu6A&ust=1502481095339508">
</a>
</div>
</div>
<div class="d-flex col pl-0 pr-0 align-items-center justify-content-end justify-content-md-start">
<div class="flex-wrap header-middle-menu-outer col col-auto hidden-sm-down">
<nav class="header-middle-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Sample Page</li>
<li>Terms and Conditions</li>
<li>Privacy Policy</li>
</ul>
</nav>
</div>
<div class="header-middle-social-media-icons-outer col col-auto">
<nav class="header-middle-social-media-icons text-center icons-circle icons-sm">
<ul class="social-media-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
Okay, I think I finally figured out what the deal is. The Bootstrap defaults for some classes you have are different from what you want in this case.
You need to override the default styling for .col-auto on .header-middle-menu-outer. It is the flex-shrink value of 0 in the shorthand flex property that is killing you. Since the columns aren't allowed to shrink, you're getting things pushed off the side of the screen, and no wrapping is happening.
The default flex styling will suffice for .header-middle-menu-outer, so you can just use this in your CSS:
.header-middle-menu-outer.col {
flex: initial;
}
That will set things back to the default of flex: 0 1 auto, which will mean that the left column will be allowed to shrink while the right column will continue not shrinking. So the left column will wrap, and the right won't.
I would say you could simply strip away the col-auto class (which you may do anyway), but then you'd fall back to the styling for .col, which also includes the same problematic style: flex: 0 0 auto. So unless you want to remove that class too, you'll probably have to use an overriding style in your CSS either way.
Updated fiddle.
As a side note, I'd recommend you re-visit which classes you include on each element. If you inspect things in your browser console, you'll see that you have a lot of competing styles being applied by those classes, which aren't helping you out any. For example, .d-flex contains both justify-content-end and justify-content-md-start, which do exactly the opposite thing. But in this case, I believe you need neither. In the fiddle I linked above, if you delete both those classes, the layout doesn't change at all.
Also, the classes col-auto and col are very similar. In the case above for .header-middle-menu-outer, even though removing col-auto won't fix your problem, you might do it anyway because I'm not sure that class is really adding anything at this point.
I suspect there are many classes you could eliminate and then if there is a certain style rule for one of those removed classes that you want to include, just drop that in your stylesheet as a one-off.