Recently I ran into a weird bug where characters get shuffled/mixed when the page is loaded, not everytime but once every few loads you will see it. Kindof like a fouc except it only goes away on reload. I was wondering if someone has ever seen something like this before and can explain to me why this happens and how to solve it or prevent it from happening. For so far I couldn't reproduce this error in any browser but the original samsung browser.
The first word in the image should be ' contact', second one 'inschrijven'.
HTML:
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-phone"></i>
<p>Contact</p>
</a>
</div>
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-pencil-square-o"></i>
<p>Inschrijven</p>
</a>
</div>
<div class="cta-widget">
<a class="cta-link" href="#">
<i class="fa fa-user"></i>
<p>Team</p>
</a>
</div>
The only css used for just the text is
.c2aArea .cta-link p {
line-height: 1.2em;
margin-bottom: 0;
}
Related
I am editing a WordPress widget's HTML.
I copied directly from the original code adding social media links and 1 additional social media section, copied from the first section, and changed only the names and links.
Whenever I checked it I get the following errors:
End of file seen and there were open elements
Unclosed element
See enclosed image.
HTML Errors
Here is the code ( WordPress widget HTML do not require; Doctype, title, header, etc ):
<div class="ce-team">
<figure>
<img src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png" alt="team">
</figure>
<h3>
Anthony Gigante
</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome incredible obstacles, succeeded, and at the same time inspiring others.
</p>
<div class="team-socials">
<i class="cl-icon-facebook"></i><i class="cl-icon-instagram"></i>
<i class="cl-icon-instagram"></i><i class="cl-icon-youtube"></i>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i></a>
</div>
I'm sure I'm missing something obvious. Your help is greatly appreciated.
Thank you!
Paula
The problem is that the first DIV is missing closing, Putting the closing DIV tag at the end of the code should fix the problem.
<div class="ce-team">
<figure>
<img
src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png"
alt="team"
/>
</figure>
<h3>Anthony Gigante</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome
incredible obstacles, succeeded, and at the same time inspiring others.
</p>
<div class="team-socials">
<a href=" https://ourfightingspirit.com/staff/anthony-gigante">
<i class="cl-icon-facebook"></i
></a>
<a href="Facebook—https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="Instagram—https://www.instagram.com/ourfightingsprit/">
<i class="cl-icon-youtube"></i
></a>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i
></a>
</div>
</div>
But closing the DIV is a bit confusing, as there are two possibilities to close the div tag. If the first option doesn't work well, try the following code. This closes the DIV before the second DIV
<div class="ce-team">
<figure>
<img
src="https://ourfightingspirit.com/wp-content/uploads/2022/03/anthony-headshot-small.png"
alt="team"
/>
</figure>
<h3>Anthony Gigante</h3>
<h6 class="team-position">host</h6>
<p>
The stories you will hear are people like you and me who have overcome
incredible obstacles, succeeded, and at the same time inspiring others.
</p>
</div>
<div class="team-socials">
<a href=" https://ourfightingspirit.com/staff/anthony-gigante">
<i class="cl-icon-facebook"></i
></a>
<a href="Facebook—https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="https://www.facebook.com/OurFightingSpirit">
<i class="cl-icon-instagram"></i
></a>
<a href="Instagram—https://www.instagram.com/ourfightingsprit/">
<i class="cl-icon-youtube"></i
></a>
<a href="https://www.youtube.com/channel/UCps0blZJBsefbHfxXRpTgvQ">
<i class="cl-icon-you-tube"></i
></a>
</div>
I am trying to create social media icons using svg files in a footer. If I use inline css, it works. If I don't, it does not show. I am using styled-components package.
Any idea how can I get it to work without inline css?
This works:
<div style={{ width: '25px', margin: '0 5px' }}>
<a href={link}>
<img src={iconName} alt={(iconName, 'icon')} />
</a>
</div>
This does NOT work:
const iconSocial = styled.div`
width: 25px;
margin: 0 5px;
`;
<iconSocial>
<a href={link}>
<img src={iconName} alt={(iconName, 'icon')} />
</a>
</iconSocial>
This also does NOT work:
<div>
<a href={link}>
<img src={iconName} alt={(iconName, 'icon')} />
</a>
</div>
if you want show image between a tag then we have two option first one our custom image (also you need to write some css to its styling) and second is using fa icon you can use any method according to your requirement.
<a href="">
<img src="https://static.vecteezy.com/system/resources/thumbnails/001/993/889/small/beautiful-latin-woman-avatar-character-icon-free-vector.jpg" alt="" srcset=""> Profile
</a>
<hr>
<i class="fa fa-facebook-square" aria-hidden="true"></i>Facebook
<i class="fa fa-twitter" aria-hidden="true"></i> Twitter
<i class="fa fa-linkedin" aria-hidden="true">Linkdin</i>
.svg-img{
width: 100px;
height: 100px
}
<div>
<a href="">
<img class="svg-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNC44NTEgMTEuOTIzYy0uMTc5LS42NDEtLjUyMS0xLjI0Ni0xLjAyNS0xLjc0OS0xLjU2Mi0xLjU2Mi00LjA5NS0xLjU2My01LjY1NyAwbC00Ljk5OCA0Ljk5OGMtMS41NjIgMS41NjMtMS41NjMgNC4wOTUgMCA1LjY1NyAxLjU2MiAxLjU2MyA0LjA5NiAxLjU2MSA1LjY1NiAwbDMuODQyLTMuODQxLjMzMy4wMDljLjQwNCAwIC44MDItLjA0IDEuMTg5LS4xMTdsLTQuNjU3IDQuNjU2Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LTEuOTUyLTEuOTUxLTEuOTUyLTUuMTIgMC03LjA3MWw0Ljk5OC00Ljk5OGMuOTc1LS45NzYgMi4yNTYtMS40NjQgMy41MzYtMS40NjQgMS4yNzkgMCAyLjU2LjQ4OCAzLjUzNSAxLjQ2NC40OTMuNDkzLjg2MSAxLjA2MyAxLjEwNSAxLjY3MmwtLjc4Ny43ODR6bS01LjcwMy4xNDdjLjE3OC42NDMuNTIxIDEuMjUgMS4wMjYgMS43NTYgMS41NjIgMS41NjMgNC4wOTYgMS41NjEgNS42NTYgMGw0Ljk5OS00Ljk5OGMxLjU2My0xLjU2MiAxLjU2My00LjA5NSAwLTUuNjU3LTEuNTYyLTEuNTYyLTQuMDk1LTEuNTYzLTUuNjU3IDBsLTMuODQxIDMuODQxLS4zMzMtLjAwOWMtLjQwNCAwLS44MDIuMDQtMS4xODkuMTE3bDQuNjU2LTQuNjU2Yy45NzUtLjk3NiAyLjI1Ni0xLjQ2NCAzLjUzNi0xLjQ2NCAxLjI3OSAwIDIuNTYuNDg4IDMuNTM1IDEuNDY0IDEuOTUxIDEuOTUxIDEuOTUxIDUuMTE5IDAgNy4wNzFsLTQuOTk5IDQuOTk4Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LS40OTQtLjQ5NS0uODYzLTEuMDY3LTEuMTA3LTEuNjc4bC43ODgtLjc4NXoiLz48L3N2Zz4=">
</a>
</div>
In the this codepen I have a row with 3 div tags and each div tag has 1 icon tag. However, I am getting 2 extra icon tags showing below the ID column. Where are theses extra icons coming from? When I inspect element it appears to be under my container class but it is not what is in my html. Thank you.
This is what I have in the html:
<div class="row">
<div class="col-4"><span ng-click="sortBy('ID')">ID <i id="id-caret" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="bird-name-caret" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="bird-type-caret" class="fa fa-caret-down"</i></span></div>
</div>
It occurs because of there is unclosed <i> tag:
<div class="col-4">
<span ng-click="sortBy('Type')">Type of Bird
<i id="bird-type-caret" class="fa fa-caret-down"></i>
</span>
</div>
Here is my page screenshot http://s30.postimg.org/44jynnz35/Untitled_2.png
html:
<div id="social-bar">
<a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
<i class="icon icon-facebook"></i>
<span>Facebook</span>
</a>
<a href="https://twitter.com/moo9000">
<i class="icon icon-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://plus.google.com/103323677227728078543/">
<i class="icon icon-google-plus"></i>
<span>Google Plus</span>
</a>
<a href="http://opensourcehacker.com/">
<i class="icon icon-rss"></i>
<span>Blog</span>
</a>
</div>
I have been created social links with social icons, I took source code from this link https://github.com/miohtama/FontAwesome-and-Bootstrap-social-icons-example/
I need one more link and icon, that is mailbox.
So i added code like this,
<a href="http://opensourcehacker.com/">
<i class="icon icon-gmail"></i>
<span>Email</span>
</a>
But i m not sure for mail box icon code,
I have 3 files,
1. <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
2. <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />
3. <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
So may i know, exact code for mailbox icon or where can i take?
Any help would be highly appreciated.
Thanks in advance.
It's icon-envelope
<i class="icon icon-envelope"></i><span>Email</span>
Since you are using older version of fontawesome, some icons may be missing from the file. Try using this updated library : http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css instead of older one.
I've been really frustrated over the issue, searched many options, found none to work, and do not have the heart to ponder over it further.
The website in question is https://flix-c9-airbusai342.c9.io/.
Here, I'm having issues with the columns being too wide in mobile. Yes, they are properly stacking, however, not sure what's causing it to be too wide.
Below is a direct snippet of the code of the area in question. The class .stats is onlybackground-color: #D8D8D8; for changing background color.
<section class="stats">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-4" align="center">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x turquoise"></i>
<i class="fa fa-code fa-stack-1x fa-inverse"></i>
</span>
<h2>Professional Coding</h2>
<span class="text-muted"><p>A team of experienced web developers are ready to give you the best quality code available to be provded for you. <b>Each</b> and <b>every</b> time.</p></span>
</div>
<div class="col-md-4" align="center">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x turquoise"></i>
<i class="fa fa-bolt fa-stack-1x fa-inverse"></i>
</span>
<h2>Dedicated Team</h2>
<span class="text-muted"><p>Nothing's perfect. Even us. Thus, our dedicated team is ready to help you whenever you need it, even if it means sacrificing leasure time.</p></span>
</div>
<div class="col-md-4" align="center">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x turquoise"></i>
<i class="fa fa-mobile fa-stack-1x fa-inverse"></i>
</span>
<h2>Mobile compatible</h2>
<span class="text-muted"><p>We know the new trends of websites. Meeting popular demand, our websites by default look great on any device across. Even this website.</p></span>
</div>
</div>
</div>
I openly allow you to view the page source of the website.
Thank you for any assistance; my dull mind is suffering. :)
You have a min-width of 960px on your .section
Removing that will solve a lot of things. If you do not want your content to stretch to the full width of the window, use a max-width: 960px; instead. Otherwise, just remove the min-width of 960px
Remove .row-fluid and use .row.
Remove align="center" that's old stuff
Use .text-center on the parent of the stuff you want centered (provided it's inline or inline-block elements)
Use .center-block on any block elements (like an .img-responsive).