I'm having an issue on chrome for windows where my .card items don't seem to get the right height. They get too much or too little resulting in the issue you can see in my screenshot below. This is only happening on Chrome for Windows as far as I can tell.
Platforms where this issue doesn't happen:
Internet Explorer 11
Microsoft Edge
Firefox
Chrome on mac
JSFiddle
<div class="ui grid stackable container">
<div class="sixteen wide column">
<div class="ui link five doubling cards">
<a class="ui card" href="#">
<div class="image">
<img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//002.png">
</div>
<div class="content">
<div class="header">Ivysaur</div>
<div class="meta">Grass</div>
<div class="description">
</div>
</div>
<div class="extra content">
<span><i class="idea icon"></i>Pokemon</span>
</div>
</a>
<a class="ui card" href="#">
<div class="image">
<img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//004.png">
</div>
<div class="content">
<div class="header">Charmander</div>
<div class="meta">Fire</div>
<div class="description">
</div>
</div>
<div class="extra content">
<span><i class="idea icon"></i>Pokemon</span>
</div>
</a>
...
</div>
</div>
</div>
I had the same problem in production on one of my website. The bug appears if the images are not in cache and must be downloaded, only on Chrome, after a recent update.
I found that a commit was about the css-flex used by semantic-ui to produce cards. This bug report details the problem and some workarounds.
I chose to add min-height: 0; to the content of my card and It worked the way it should.
Related
Is it possible using Semantic UI Card have the image on the left? The documentation shows example where the image is always on the top. What i want to obtain is something like the Semantic UI Item (but of course i want use cards), like this:
What i want to obtain is something like this:
As you can see the image is on the left and it is something similar to a Semantic UI card.
The best you can do with semantic components would be this:
<div class="ui card" style="max-width: 100%; min-width: 100%;">
<div class="content" style="padding: 0;">
<div class="ui items">
<div class="item">
<div class="ui medium image">
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content" style="padding: 1rem;">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
</div>
</div>
<div class="extra content">
<a>
More Info
</a>
</div>
</div>
I have changed the padding on the content but that's the only custom CSS used.
To get it to look exactly like your image you will need to make your own component/style it your self.
<section class="container">
<div class="row">
<div class="col-md-8">
<h4>Het Parool</h4>
<h2>Help users choose the best online experience</h2>
</div>
<div class="col-md-4 float-md-right">
<img class="preview" src="img/parool-half.png" />
</div>
<div class="col-md-6 float-md-left">
<a class="btn btn-default" href="parool.html" role="button">Link</a>
</div>
</div>
</section>
I'm new to bootstrap and I am not totally getting the grid system.
I made a design here for desktop Desktop version
And I want it to become this on mobile Mobile version
Can someone explain to me how I can do this?
Thanks a lot!
I'm having some problems nesting rows because behaviour is different in Firefox, Chrome and Explorer.
I have two different snippets:
<div class="row">
<div class="col-md-2">
<div class="sidebar affix">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
Some content here
</div>
</div>
</div>
</div>
</div>
<div class="col-md-offset-2 col-md-8">
<div class="content">
Some other content
</div>
</div>
</div>
The result in Firefox is like
Meanwhile in Chrome and Explorer 9 look like
The code seems to be well formatted. The solution I tried is change "col-md-12" to "col-md-3" but now, I have the expected results in Chrome and Explorer but not Firefox.
Is there any workaround or a way to make bootstrap use a different classes depending of the browser?
The Bootstrap documentation seems contrary on this, but I find in my projects, if I want to nest rows inside other rows I also have to include an inner .container-fluid.
For example:
<div class="row">
<div class="col-md-2">
<div class="sidebar affix">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
Some content here
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-offset-2 col-md-8">
<div class="content">
Some other content
</div>
</div>
</div>
When I do this I don't see any rendering difference between Firefox and Chrome.
I am not sure if this white space above the div is caused by a media query or by something in the twitter bootstrap css.
Here is the page at mid view: http://postimg.org/image/gq9dfuuah
Here is my markup for the top section of the page:
<div class="page-section intro">
<div class="container">
<div class="logo"><img src="../../images/logo-2.png" id="backdrop"></div>
<div class="intro_wrapper">
<div class="row">
<div class="col-md-6"><span class="pull-right">
<div class="mockup">
<img src="../../images/techandall_shadow_series_apple.png" id="backdrop">
</div>
</div></span>
<div class="col-md-6">
<span class="pull-right">
<div class="saying">Design, Development, Dedication</div>
<div class="left"><p class="lead center">We are highly experienced in Responsive Web Design, Database-driven websites, Content Management Systems, and Custom Web Applications.</p>
</div>
<div class="intro_buttons center-block">
<div class="center_button">
Get A Quote
</div>
</div>
</div></span>
</div>
</div><!-- feature_wrapper -->
</div><!--/.container-->
I am having trouble getting web-kit to cooperate! You can see from the images that the left column does as intended in FF yet Web-kit browsers (Safari and Chrome) produces the second image. I am lost as how to fix the issue!
Firefox Version
Webkit Version
Code for area on question
<div class="container" style="margin-top: 30px; position: relative;">
<section class="row" ><!--id="content" -->
<div class="content_bckgrnd span9">
<div class="item-page">
<p style="text-align: center;"><img src="http://avanti.websitewelcome.com/~ingles/images/demo/store-locations.png" width="531" height="368" alt="store-locations" /></p>
</div>
</div>
<div class="content_bckgrnd span3 ">
<div class="mod-padding">
<div class="mod_content ">
<div class="custom" >
<p style="text-align: center;"><strong><img src="http://avanti.websitewelcome.com/~ingles/images/demo/Bldg-Background.jpg" width="150" height="47" alt="Bldg-Background" /><br data-mce-bogus="1" />
</strong></p>
<p><strong>Store Search</strong><br />
To search for an Ingles store near you, type in your zip code or enter your city and state. Click 'Find Stores' to see your results</p>
<p>Narrow your search by clicking on the options to the right. Search for stores with Pharmacies, Bakeries, or ones that are open 24 hours.</p>
<p><strong>Your Results Page</strong><br />
'More Information'- click this to see store locations and to get directions to the store.</p>
<p>'Weekly Ads' click this to view your stores weekly ads.</p>
<p><strong>Sort Your Results</strong><br />
Sort your results by clicking Store, Address, City, State or Zip at the top of the results.</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
<div class="wrapper background" id="module-positions">
<div class="container" style=" min-height:65px;">
<!-- module-positions -->
<section class="row"> </section>
<div class="row">
<div class="span6"> </div>
<div class="span6"> </div>
</div>
</div>
</div>
JsFiddle
Link to development site for raw code view
You will define a div #HomeTopBckgrnd with:
height: 1240px;
margin-top: -360px;
fixed heights will ask for troubles.
Why not something like:
<header></header>
<div id="HomeTopBckgrnd"> Your centent here</div>
<footer></footer>
or
<div id="HomeTopBckgrnd">
<header></header>
<div> Your centent here</div>
<footer></footer>
</div>