How to change "Contacte-nos" text color on :hover?
.popmake-contacte-nos {
background-color: #fffff7;
/* Green */
border: none;
color: black;
font-weight: bold;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.popmake-contacte-nos:hover {
background-color: #3c8b96;
}
<button class="popmake-contacte-nos">Contacte-nos</button>
Just add color to your hover selector
.popmake-contacte-nos {
background-color: #fffff7;
/* Green */
border: none;
color: black;
font-weight: bold;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.popmake-contacte-nos:hover {
background-color: #3c8b96;
color: white;
}
<button class="popmake-contacte-nos">Contacte-nos</button>
Related
I am working with this css file and I can;t figure out what is the full class name of the button with noHover variant. I need it to be used in a different stylesheet. I cannot look it up in console as the classes are generated dynamically there. if it helps, the stylesheet name is: Button.module.scss. Any hints appreciated.`
.main {
background-color: #2a2a2a;
color: #ffffff;
font-size: 16px;
line-height: 24px;
font-weight: 600;
padding: 10px 30px;
&:not(.noHover):hover {
color: #ffffff !important;
background-color: $primary;
text-decoration: none;
}
}
.small {
#extend .main;
font-size: 13px;
line-height: 24px;
padding: 5px 10px;
font-weight: 400;
}
.outline {
display: inline-block;
padding: 5px 10px;
border: 1px solid #2a2a2a;
color: #2a2a2a;
font-size: 13px;
line-height: 22px;
&:not(.noHover):hover {
background-color: #2a2a2a;
color: #ffffff;
}
}
`
I am using a CSS button code, but I found some problem in doing it. I want that the width of my button should get fixed for the mobile view but it should be auto for the window. how can I do it, please help? Or it should be auto placed in the center. I am using this code. I am using CSS like this.
CSS code :
.button1
{
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2
{
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 a:link, .button2 a:visited
{
background-color: #FF5733;
color: white;
text-decoration: none;
}
.button2 a:hover, .button2 a:active
{
background-color: #FF5733;
color:#000000;
}
#media screen and (max-width: 680px) and (min-width:0px)
{
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;}
.button1 { padding: 6px 32px;width: 85px;max-height:88px;}
}
HTML code:
<button class="button button1">
BUY NOW
</button>
<button class="button button2">
DETALS
</button>
For a start, change the button display from inline-table to inline-block
I am having trouble centering the following CSS dropdown menu:
.container {
overflow: hidden;
background-color: none;
font-family: 'Questrial', sans-serif;
}
.container a {
float: right;
font-size: 20px;
color: green;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: green;
padding: 14px 16px;
background-color: inherit;
font-family: 'Questrial', sans-serif;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: none;
color: green;
}
.dropdown-content {
display: none;
position: absolute;
background-color: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: green;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: none;
color: green;
}
.dropdown:hover .dropdown-content {
display: block;
}
I have tried using position: absolute, and entering values for "top" and left" however this only seems to move the text, and loses the dropdown functionality.
Any help would be appreciated.
Thanks.
Full code here:
gist.github.com/ruslan024/1a7d2ce4936a35369221a8f0e41c5dd7
Do you mean something like this? Without the full HTML formatted into a snippet (not just some 3rd party gist) I had to make some assumptions. Apart from that it was just a few CSS tweaks.
.container {
background-color: #eee;
font-family: 'Questrial', sans-serif;
text-align: center;
height: 300px;
}
.container > a {
display: inline-block;
font-size: 20px;
color: green;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropbtn {
display: inline-block;
font-size: 20px;
padding: 14px 16px;
background-color: inherit;
font-family: 'Questrial', sans-serif;
color: green;
}
.dropdown-content {
display: none;
position: absolute;
background-color: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: green;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: none;
color: green;
}
.dropbtn:hover .dropdown-content {
display: block;
}
<div class="container">
Contact Us
<div href="" class="dropbtn">Resources
<span class="dropdown-content">
Market Data Bank
Stock Quotes
Finacial Tools
</span>
</div>
<div href="" class="dropbtn">Services
<span class="dropdown-content">
Planning and Guidance
Portfolio Advisory Services
Wealth Planning
</span>
</div>
About Us
Home
</div>
When you hover over the image, you will see that it will be replaced by the text block.
When you shrink the browser, you will see that the font size remains the same, although I specified it in EMs which should have made the font responsive.
I need the layout of the hover element remain the same in mobile view, i.e. I need to avoid the scrollbar that appears if you shrink the size of the browser. Any ideas how to achieve this?
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 1.250em;
font-family: Roboto;
line-height: 1em;
font-weight: 300;
text-align: center;
overflow-y: auto;
box-sizing: border-box;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 1.750em;
font-size: 1.500em;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 1.5em !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 3.125em;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}
<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<h5 style="color: white; font-size: 2.375em; font-family: Montserrat; font-weight: 600; line-height: 1em; letter-spacing: 0.125em;">WEBINAR<br/>ARCHIVE</h5>
<hr style="border-top: 0.125em solid #ffffff; width: auto; margin: 0.625em 1.875em;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
<br>
<a class="btn" style="color: white; text-align: center; margin-top: 0.625em; padding-top: 0.313em; padding-bottom: 0.313em; padding-left: 1.875em; padding-right: 1.875em; text-decoration: none; font-size: 1.500em; font-weight: 600; border: 3px solid white; letter-spacing: 0.125em;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>
You can simply set the font size in vw instead of em
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 3vw;
font-family: Roboto;
line-height: 1em;
font-weight: 300;
text-align: center;
overflow-y: auto;
box-sizing: border-box;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 1.750em;
font-size: 1.500em;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 1.5em !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 3.125em;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}
<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<h5 style="color: white; font-size: 2.375em; font-family: Montserrat; font-weight: 600; line-height: 1em; letter-spacing: 0.125em;">WEBINAR<br/>ARCHIVE</h5>
<hr style="border-top: 0.125em solid #ffffff; width: auto; margin: 0.625em 1.875em;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
<br>
<a class="btn" style="color: white; text-align: center; margin-top: 0.625em; padding-top: 0.313em; padding-bottom: 0.313em; padding-left: 1.875em; padding-right: 1.875em; text-decoration: none; font-size: 1.500em; font-weight: 600; border: 3px solid white; letter-spacing: 0.125em;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>
When you hover over the image, you will see that it will be replaced by the semi-transparent background in my code.
The transparent background is supposed to cover all the picture, however, it only covers the area taken by the text.
How do I make sure that it covers the whole picture, regardless of the text within the box?
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
}
div.text-content div {
display: block;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 50px;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}
<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5>
<hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
<br>
<a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>
Remove display:table; from .text-content. Also add bottom:0; to it.
Remove display: table;, and for aligning the content vertically center use CSS Flexbox's align-content property.
Have a look at the snippet below:
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
display: flex;
align-items: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
}
div.text-content div {
display: block;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 50px;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}
<ul class="img-list"><li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /><div class="text-content"><div><h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5><hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.<br><a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a></div></div></li></ul>
Hope this helps!
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
}
div.text-content div {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 50px;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}
<ul class="img-list"><li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /><div class="text-content"><div><h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5><hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.<br><a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a></div></div></li></ul>
Just add this Css:
.text-content div{
height:1326px;
}