I faced with a problem with the vertical cards position in accordance with the design (image attached). Firstly I tried position it with the flexbox property but seems it's not the right way because it is just move element to the next line in a "natural flow" but I don't need such behaviour. The most closest solution was to set column-count: 2 property to the news__items class in parent container but I can't control the order in this case. I feel like display: grid can help here but can't figure out how to implement it yet. Note: images have the same height and width.
Here is the html and css markup:
.news__items {
column-count: 2;
}
<div class="news__items">
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h2 class="news__primary-title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem ipsum dolor
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">MFF in the News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
</div>
What is the best approach to implement such grids?
Try this solution.
.news__items {
display: table;
}
.news__item {
width: 50%;
float: left;
}
Related
I'm trying to use background image on wordpress however it isn't working any help would be appreciated.
I have used inline styling for background image as I found other answers on here saying to do this but it still won't work.
<div class="container">
<div class="left" style =" <?php echo get_template_directory_uri(); ?>background-image: url('/img/img/6c0bfc47-d8d3-41f4-9c17-7fca574b5efc.jpg');">
</div>
<div class="right">
<h1>Windows and Glass</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dui a tortor facilisis, a ornare enim pretium. Duis turpis neque, porta tincidunt vehicula vitae, congue sed elit. Aliquam erat volutpat. Pellentesque lacinia ipsum vulputate, pretium ligula vitae, auctor augue. Ut volutpat ipsum quis ligula cursus, et pulvinar elit sollicitudin. Duis eu interdum libero. Sed dignissim fermentum eros id dapibus.</p>
</div>
</div>
I'm trying to achieve the following two column layout using Bootstrap 4:
My problem is, when I add content to the right column, it "pushes" the left one below, like this:
Here's my code so far:
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
<div class="row">
<div class="col-md-6">B</div>
</div>
I'm not sure how to proceed next...
Technically, you should take 'B' part of the tag inside the 'A' tag and wrap both 'A' and 'B' with their own 'row' and 'col' tags.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">A</div>
</div>
<div class="row">
<div class="col">B</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec at orci porta, suscipit
felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
eget consequat sem dapibus nec.
</div>
</div>
You can achieve the structure you are asking for as below. You were just mistaking while placing row and columns.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
A
</div>
<div class="col-md-12">
B
</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
I want to display a list via "collapsible bootstrap panels" but I notice when I open certain panels they do not align properly.
E.g. when I open the first panel in the code all other panels move under each other under the second panel.
I want panel 3 and 4 to stay on their place in their grid when I open panel 1.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-xs-6">
<div>
<a
href="#panel1"
class="btn btn-info"
data-toggle="collapse">Panel 1</a>
</div>
<div
id="panel1"
class="collapse">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent scelerisque, neque sit amet aliquam pulvinar, metus
arcu commodo sem, id volutpat erat nulla imperdiet enim. Proin
imperdiet dolor vitae lorem efficitur, non tincidunt nisi
accumsan. Nam condimentum mi ac auctor tincidunt. Fusce eget
tempus velit, in porta velit. Mauris vel ultrices ipsum. Nunc
rutrum vitae quam ut porta. Suspendisse diam sem, molestie sed
nisl id, imperdiet ornare libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam sagittis augue vitae iaculis
lacinia. Ut id eros egestas turpis vehicula feugiat ut eu
lectus. Ut eu consequat arcu, a porttitor magna.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel2"
class="btn btn-info"
data-toggle="collapse">Panel 2</a>
</div>
<div
id="panel2"
class="collapse">
<div>
<p>Nunc vel lectus sit amet ante imperdiet aliquet non sit amet
felis. Vestibulum rhoncus rutrum ante nec sodales. Aliquam
vitae suscipit orci. Nam dignissim a purus vitae efficitur.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nam libero augue,
scelerisque ut rhoncus eu, scelerisque a enim. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Ut luctus molestie lectus, ac dictum sem tempor
id.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel3"
class="btn btn-info"
data-toggle="collapse">Panel 3</a>
</div>
<div
id="panel3"
class="collapse">
<div>
<p>Aliquam sit amet convallis nulla, quis dapibus elit. Aliquam
nisl justo, mollis et pulvinar ut, laoreet eu enim. Quisque
maximus scelerisque dui, aliquam posuere dolor consequat ut.
Nullam semper dictum urna et auctor. Donec lacus risus,
sagittis at vestibulum ac, dictum vitae mauris. Duis non velit
congue diam vulputate auctor a et libero. Duis a tortor
lobortis, suscipit orci eu, facilisis eros. Proin et faucibus
tortor, in finibus elit. Morbi suscipit porttitor justo
interdum euismod. In posuere leo velit, non egestas tortor
malesuada sit amet. Phasellus malesuada ultricies massa eget
volutpat.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel4"
class="btn btn-info"
data-toggle="collapse">Panel 4</a>
</div>
<div
id="panel4"
class="collapse">
<div>
<p>Cras interdum dui sit amet nisi porttitor, iaculis cursus
tellus tincidunt. Praesent iaculis eget ipsum sed condimentum.
Fusce aliquam ipsum mauris. Donec laoreet dapibus efficitur.
Quisque in rhoncus dolor. Aliquam erat volutpat. Quisque eget
quam sed velit ultrices pellentesque. Vivamus neque arcu,
vestibulum in neque a, tincidunt sagittis lectus. Nullam nisi
nulla, semper non maximus sed, rutrum vel velit.
</p>
</div>
</div>
</div>
</div>
</div>
**Tyr With this**
<div class="container">
<div class="row">
<div class="col-xs-6">
panel1 Code
</div>
<div class="col-xs-6">
panel2 Code
</div>
</div>
<div class="row">
<div class="col-xs-6">
panel3 Code
</div>
<div class="col-xs-6">
panel4 Code
</div>
</div>
</div>
Please help me out here, I've created this jsfiddle to make it clear.
http://jsfiddle.net/yvesvanlaer/2r3Cp/
The first letter is also different in a deeper level
I only want it to be on the first P (not in the blockquote).
Thank you so much.
<div about="/news/lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" typeof="sioc:Item foaf:Document" class="ds-1col node node-news view-mode-full clearfix">
<div class="field field-name-title field-type-ds field-label-hidden">
<div class="field-items">
<div class="field-item even" property="dc:title">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
</div>
</div>
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>
Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.
</p>
<blockquote>
<p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
</blockquote>
</div>
</div>
</div>
</div>
You need only the immediate descendant of .field-item, so add that in there with >:
.view-mode-full .field-name-body .field-item > p:first-child:first-letter {
float: left;
font-size: 36px;
line-height: 36px;
padding-right: 4px;
font-style: normal;
}
JSFiddle
When I have a grids layout that has little content in the yui-main block, some of the sidebar blocks (in my case those outside yui-main) jump down under the main block.
Here is an example page of this issue (and a pastebin'd source if the file no longer exists).
Examples
This one works fine as the content within #yui-main is longer than the content outside of it:
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
</div>
<div class="yui-b">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
</div>
</div>
<div class="yui-b">
<h2>Delors sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
</div>
</div>
However this one does not, as the content outside of yui-main is longer than the content inside of it. Thus it overspills underneath yui-main.
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
</div>
</div>
<div class="yui-b">
<h2>Delors sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
</div>
<div class="yui-b">
<h2>Delors sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
</div>
</div>
The yui-b divs are floating but haven't been cleared. This essentially means that there's nothing to tell them below which elements to float, leaving them to vertically stack as seen.
Setting clear:both on the second yui-b div fixes this.