After some advice really, I cant seem to find any information about how to do this and cant figure it out from trying many scenarios in code.
I want two columns split 8 and 4. (consider this for desktop for now)
The 8-wide column will have full-width cards as will the 4. However, no matter what I do, the taller of the cards causes the other column to match the height. How do I stop this so I can have different height cards which dont cause other content to match the tallest height?
let's say you have this:
.mdl-grid
.mdl-card.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-shadow--2dp
%figure.mdl-card__media
= image_tag "prequelle.jpg"
.mdl-card__title
%h2.mdl-card__title-text
Welcome to Hell
.mdl-card__supporting-text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
.mdl-card__actions.mdl-card--border
%a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect Read More
.mdl-layout-spacer
%button.mdl-button.mdl-button--icon.mdl-button--colored
%i.material-icons favorite
%button.mdl-button.mdl-button--icon.mdl-button--colored
%i.material-icons share
.mdl-card.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-shadow--2dp
%figure.mdl-card__media
= image_tag "bg_map1.png"
.mdl-card__title
%h2.mdl-card__title-text
Welcome to Hell
.mdl-card__supporting-text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
.mdl-card__actions.mdl-card--border
%a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect Read More
.mdl-layout-spacer
%button.mdl-button.mdl-button--icon.mdl-button--colored
%i.material-icons favorite
%button.mdl-button.mdl-button--icon.mdl-button--colored
%i.material-icons share
Then your cards will all be the same height.
You have to move the mdl-card inside the mdl-cell class
So, do this to get different heights:
.mdl-grid
.mdl-card.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-shadow--2dp
%figure.mdl-card__media
= image_tag "prequelle.jpg"
.mdl-card__title
%h2.mdl-card__title-text
Welcome to Hell
.mdl-card__supporting-text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
.mdl-card__actions.mdl-card--border
%a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect Read More
.mdl-layout-spacer
%button.mdl-button.mdl-button--icon.mdl-button--colored
%i.material-icons favorite
%button.mdl-button.mdl-button--icon.mdl-button--colored
%i.material-icons share
.mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
.mdl-card.mdl-shadow--2dp
%figure.mdl-card__media
= image_tag "bg_map1.png"
.mdl-card__title
%h2.mdl-card__title-text
Welcome to Hell
.mdl-card__supporting-text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
.mdl-card__actions.mdl-card--border
%a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect Read More
.mdl-layout-spacer
%button.mdl-button.mdl-button--icon.mdl-button--colored
%i.material-icons favorite
%button.mdl-button.mdl-button--icon.mdl-button--colored
%i.material-icons share
Just found the content-grid class which I wasn't using. Working as I want it to now.
Related
im starting to creating my first wordpress themes, i added to my footer the Widget Text feature, is workign well, but is not adding me the paragraphs in the content, i try to check if there is some kind of enable option to html in the content Widget text.
The html looks like:
<div class="widget widget_text"><div class="title">Informação</div><div class="textwidget">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt viverra lectus ac venenatis. Nullam convallis, diam sed feugiat vehicula
</div>
</div>
When in reality i need in the textwidget wrapper classe be like (with paragraphs):
<div class="widget widget_text"><div class="title">Informação</div><div class="textwidget">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt viverra lectus ac venenatis. Nullam convallis, diam sed feugiat vehicula</p>
</div>
</div>
I already tried to but the paragraphs (p) tags in the widgets secton in CMS, but is not working.
Is there a option to activate the paragraphs in the WidgetText Wordpress? Im using the latest wordpress version (6.1.1).
regards
I'm wondering if there is a strategy to get colored bullet list dots just using Tailwind utility classes and without writing any line of CSS.
I spent some time searching but I haven't found any solution yet.
This is the list I'm working on at the moment.
<ul class='list-outside list-disc ml-6'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
<li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
<li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
Just add marker:text-color, where color is the color you want:
<ul class='marker:text-green list-outside list-disc ml-6'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
<li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
<li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
You will have to specify it like this to achieve a colored bullet list.
<li class="text-red-500">
<div class="text-black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.
</div>
</li>
I solved it like this:
<ul class='list-outside list-disc ml-6'>
<li class="text-red-500">
<span class="text-black">Lorem ipsum dolor</span>
</li>
<li class="text-red-500">
<span class="text-black">Nunc nec gravida enim.</span>
</li>
</ul>
Niche answer here, but for those wanting to achieve this in innerHTML in a React component, you can target the li element specifically with:
.your-class {
li::marker {
#apply text-sky;
}
}
<div className='your-class' dangerouslySetInnerHTML={{__html: yourContent}}/>
This answer is an approximation and depends on framework. If you're using Tailwind in React you may already be familiar with 'unresetting' your your base styles. This solution is for those who have done this.
More here and here.
having problem with background image with css on Mac Os.
if we change the resolution of browser it turn to look bad.i need look like same in every resol and also on Mac os.
There is 2 section have bg image
using Mac os
http://i.imgur.com/UmGGBA4.jpg
using window os
https://i.imgur.com/QjXNxag.jpg
I want to look like window os image on MAC.
code
.section-about {
background: url("http://i.imgur.com/NlczAVu.jpg") top right/cover no-repeat;
min-height: 545px;
}
/* line 180, ../sass/screen.scss */
.section-experinece {
background: url("http://i.imgur.com/eAeB5ci.jpg") top right/cover no-repeat;
min-height: 1130px;
}
h1 {
margin: 0;
}
.one {
color: #fff;
margin: 0;
}
p {
margin: 0;
}
<section id="about" class="section-about">
<h1>section1</h1>
<p clas="one">Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
<p clas="one">Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
</section>
<section id="experinece" class="experinece-sec section-experinece">
<h1>section2</h1>
<p>Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
<p>Lorem ipsum doeqw sitqwewqe amet, consectetur adipiscing elit. Phasellus porta massa sit amet magna luctus euismod. Maurn malesuada nunc. <span class="bold">Lorem ipsum dolor sit amet.</span></p>
</section>
thanks.
It looks like your problem is not the OS you are on, but the screen resolution you are viewing on.
Check the page on a windows machine and make the view as wide as you can.
I have a list of items where each item contains a header and a text. The item may also contain an image between the header and the text.
If the item contains an image, the header should be overlayed on top of the image.
How can I accomplish this by applying CSS to the following markup (which cannot be changed!):
<div class="wrapper">
<h2>First item</h2>
<img src="MyImage.jpg" width="400" height="200" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque in orci consectetur, auctor risus
sed, adipiscing neque. Integer ornare vestibulum
mauris, quis blandit nibh vestibulum sed.
</p>
</div>
<div class="wrapper">
<h2>Second item</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque in orci consectetur, auctor risus
sed, adipiscing neque. Integer ornare vestibulum
mauris, quis blandit nibh vestibulum sed.
</p>
</div>
I've created a jsfiddle for you to play with: http://jsfiddle.net/9GSB8/
To overlay the header on top of the image I've tried setting "position: absolute" on the header. This works fine, but it will also make the header to be on top of the text when there is no image. This is my problem - to make it work both with and without the image.
Note that the header can be long enough that it will span over two rows.
Any help appreciated! :)
I have code here. In this code, as it can be seen that there is a div tag with class image and text is appeared on the right side. As there is a lot of text and some of the text is visible on the right and some is below the image tag. I want this text to be appeared on the right side no matter how much text is there.
How can I achieve this?
<div class="image"></div>
<p class="text">adsadas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare. adsadas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare viverra erat vel ornare.</p>
css
.image {
width: 100px;
height: 100px;
float: left;
border: 1px solid #999;
}
I think you just need to give your paragraph a margin-left based on the width of your image:
margin-left: 110px;
Demo: http://jsfiddle.net/Q7JhN/1/