my font size is fine on chrome and firefox. When viewed on safari, things go downhill completely. The font size is ginormous.
http://codepen.io/anon/pen/GZEdXZ
<section>
<div class="row">
<div class="row-sm-height">
<section class="col-sm-6">
<a href='#Url.Action("Top6GolfTerms", "Golf")'>
</a>
</section>
<aside class="col-sm-6">
<div>
<span> <a id="Article_Category">Golf</a></span>
<h2 id="Article_Header2">
<a id="Article_Title">
UFC Champions: The 5 Most Influential Fighters That Will Go Down Into UFC History
</a>
</h2>
</div>
</aside>
</div>
</div>
<hr>
</section>
<section>
<div class="row">
<div class="row-sm-height">
<section class="col-sm-6">
<a href='#Url.Action("MostInfluentialUfcFIghters", "MMA")'>
</a>
</section>
<aside class="col-sm-6">
<div>
<span> <a id="Article_Category">UFC</a></span>
<h2 id="Article_Header2">
<a id="Article_Title">
UFC Champions: The 5 Most Influential Fighters That Will Go Down Into UFC History
</p>
</h2>
</div>
</aside>
</div>
</div>
<hr>
</section>
I've tried multiple things such as changing text size to % instead of using px. I tried using text-rendering:optimizeLegibility;
On Chrome http://snag.gy/K7BjL.jpg
On Safari http://snag.gy/kOXad.jpg
From what I'm seeing from those screenshots the problem you are having is that fonts change. AFAIK not all fonts are the same size even if set to the same size. Try a different font family.
Related
So I was learning to make a web page using HTML and CSS only.. lss, I can't put the footer under the content somehow. I'm supposed to separate every block from the header, content, and footer. but the footer stays inside the content or is blended with the content.
<header>
<ul class="Tabbar">
<li>Home</li>
<li>Profile</li>
<li>Contact</li>
<li>About</li>
<div class="search-bar">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
</ul>
</header>
<img class="logoheader" src="image/Logo_1_white.png" alt="Logo">
<content class="konten">
<div class="workout">
<img src="image/Pushup_1.jpeg" alt="Push Up" class="gambar1">
<a href="detailpushup.html">
<div class="desc">
<div class="text">Push Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_beginner.jpeg" alt="Beginner Cardio" class="gambar1">
<a href="detailbeginnercardio.html">
<div class="desc">
<div class="text">Beginner Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Pullup_1.jpeg" alt="Pull up" class="gambar1">
<a href="detailpullup.html">
<div class="desc">
<div class="text">Pull Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_beginner.jpeg" alt="Beginner Yoga" class="gambar1">
<a href="detailyogabeginner.html">
<div class="desc">
<div class="text">Yoga for Beginners</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_intermediate.jpeg" alt="Intermediate Cardio" class="gambar1">
<a href="detailintercardio.html">
<div class="desc">
<div class="text">Intermediate Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_advance.jpeg" alt="Advanced Yoga" class="gambar1">
<a href="detailyogaadvance.html">
<div class="desc">
<div class="text">Advance Yoga</div>
</div>
</a>
</div>
</content>
<footer>
<p>This page was last edited on 3 February 2022, at 08:31 (UTC).</p>
<p>
Text is available under the Creative Commons Attribution-ShareAlike License 3.0; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc.,
a non-profit organization.
</p>
</footer>
I tried on putting it on a different block, and tried to give margins and padding but every time I resize the page the footer moved to the side of the content.
Maybe change the "content" to "main" or "article" or something else. "Content" is not recommended to use. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content
I am developing a website using a bought template. Everything seems to be perfect. However, I have an issue with a section of the html code where it works fine in normal screen sizes but in extra wide screen size, the div size is reduced to a strip. The images below demonstrate this:
This is how the div is in normal screens
And when the screen is extra wide, for example in devices with more than 15" screen, this is how the div looks like:
My main challenge however is that I really don't know which property is controlling this from the css file. I tried inspecting the code from chrome and the most consistent property is the box-sizing property and the value is set to inherit. Let me share the html code for this section of the div for further clarity.
<section class="gray pt-5 pb-0">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="sec-heading mx-auto">
<h2>What People say About Us</h2>
<p>Vukaplus has transformed many businesses and has moved many forward socially and financially.</p>
</div>
</div>
</div>
<div class="row m-0">
<div class="owl-carousel" id="testimonials">
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus helped us sell our house with minimal effort. Their team was efficient and always there to help!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_property.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Brian Inchedi</h5>
<span class="small-font">Real Estate Agent</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>Vukaplus has provided a platform to showcase our daycare business. After listing the business on the platform, we have never stopped receiving new clients!</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_business.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Irene Wambui</h5>
<span class="small-font">Happy Baby Day Care</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My car couldn't sell in a yard for 3 months. The day I listed it on Vukaplus, I received a customer instantly with a better offer than I wanted.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_vehicle.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Teddy Kimani</h5>
<span class="small-font">Car Sales Person</span>
</div>
</div>
</div>
</div>
<!-- Single Testimonials -->
<div class="item">
<div class="testimonial-box">
<i class="fa fa-quote-left"></i>
<p>My client wanted a potential candidate for a vacancy he had in his company. A single post on Vukaplus gave me overwhelming applications and I got the right candidate.</p>
<div class="client-thumb-box">
<div class="client-thumb-content">
<div class="client-thumb">
<img src="{% static 'base/assets/img/testimonials_recruitment.jpeg' %}" class="img-responsive img-circle" alt="">
</div>
<h5 class="mb-0">Margaret Wada</h5>
<span class="small-font">Recruiting Agent</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Kindly advise as I am not that good in frontend. The css file is too big to share the code here, but I can get snipets of the sections that are used by the html section. Thank you.
Edit: Adding CSS COde Snippet
So, I have copied the code to JSFiddle and here is the link:
Code snippets on JSFiddle
You can try to specify:
min-width: someValue
and the element won't be smaller than this value;
While everything is working fine in Chrome and Firefox, I am having issues in IE displaying correctly the outline focus around the content of some anchor elements.
As you can see in the picture the focus outline is outside the box, in a collapsed status (it looks like a dotted line) and not around it like in the other browsers.
That part of my HTML:
<section class='section'>
<div class='container'>
<div class='row mb-lg'>
<header class='col-md-8 col-md-offset-2 text-center'>
<h2 class='heading-with-bullet'>
Box Tests
</h2>
</header>
</div>
<div class='row'>
<div class='col-sm-4'>
<a href='/tests/test1'>
<div class='test-box'>
<div>
Test1
</div>
</div>
</a>
</div>
<div class='col-sm-4'>
<a href='/tests/test2'>
<div class='test-box'>
<div>
Test2
</div>
</div>
</a>
</div>
<div class='col-sm-4'>
<a href='/tests/test3'>
<div class='test-box'>
<div>
Test3
</div>
</div>
</a>
</div>
</div>
</div>
</section>
Any idea about on how I could have the focus outline work as expected?
I've only been able to find suggestions on how to remove the outline altogether, which is not ideal for accessibility reasons.
How could I possibly create four grid blocks with height and width in percentage so it could automatically resize on mobile, below is the image of what i am talking about.
I mean - 4 grid blocks , one big one at the left , and one at the right top, with the remaining two juts below the second grid block, trust me this is how best i can explain this, i would so much love and appreciate your Help.
<div class="the-home-big-grid">
<div class="the-real-big-grid">
<div class="first-big-guy">
<img src="assets/img/7.jpg" class="img-responsive" />
<div class="biggrid-overlay">
<div class="before-big-grid-overlay-content">
</div>
<p class="the-big-grid-overlay-cat">
Web Designing
</p>
<h2 class="biggrid-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-big-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
<div class="secound-big-guy">
<img src="assets/img/2.jpg" class="img-responsive" />
<div class="secound-biggrid-overlay">
<div class="before-secound-grid-overlay-content">
</div>
<p class="the-secound-grid-overlay-cat">
Web Designing
</p>
<h2 class="secound-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-secound-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
<div class="third-big-guy">
<img src="assets/img/1.jpg" class="img-responsive" />
<div class="third-biggrid-overlay">
<div class="before-third-grid-overlay-content">
</div>
<p class="the-third-grid-overlay-cat">
Web Designing
</p>
<h2 class="third-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-third-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
</div>
</div>
Image
Below is the image of what i meain
Here's Bootply: http://www.bootply.com/JlOEZaBkNs
<div class="row">
<div class="col-xs-6">A
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">B</div>
</div>
<div class="row">
<div class="col-xs-6">C</div>
<div class="col-xs-6">D</div>
</div>
</div>
</div>
I am working on a isotope gallery, and sometimes its not working properly, i needed to refresh the page a few times because i made some changes to the front end, and i saw that the portfolio works different on each refresh.
EDIT: only does this on Chrome.
this is how it should work:
but sometimes it does things like this:
Here's the link to the website, and here is my isotope gallery code:
i left out a few items, since i found out it doesnt matter how much items i put in the gallery.
<!-- section works -->
<section id="section-works" class="section appear clearfix">
<div class="container">
<div class="row">
<nav id="filter" class="col-md-12 text-center">
<ul>
<li>Alles</li>
<li><a href="#" class="btn-theme btn-small" data-filter=".photo" >Foto's</a> </li>
<li>Video's </li>
</ul>
</nav>
<div class="col-md-12">
<div class="row">
<div class="portfolio-items isotopeWrapper clearfix" id="3">
<article class="col-md-4 isotopeItem photo">
<div class="portfolio-item">
<img src="img/portfolio/img1.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info">
<h5>Portfolio name</h5>
<i class="fa fa-expand fa-2x"></i>
</div>
</div>
</div>
</article>
<article class="col-md-4 isotopeItem video">
<div class="portfolio-item">
<img src="img/portfolio/img6.jpg" alt="" />
<div class="portfolio-desc align-center">
<div class="folio-info">
<h5>Portfolio name</h5>
<a class="fancybox" href="js/jwPlayer5/player.swf? file=http://localhost/plusbus/img/portfolio/videos/files/vid1.mp4" type="video/mp4" title="local video mp4"><i class="fa fa-expand fa-2x"></i></a>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
Without code it is a bit of a guess. You are using isotope v1.56, not v2, you need to use Isoptope v1 imagesloaded info.
This is how you use it:
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
// options...
});
});
For isotope v2, you would need to load imagesloaded.js separately since it is not included as it is in v1.5