CSS Scale conflict with paddings - html

I have a div wrapping a thumb img. I applied an effect to scale and rotate the img when hovering the div. The problem is the div has a bootstrap class with padding-left, padding-right and when the image scales it removes that paddings, increasing the width of the image. How I can keep the paddings? You can see the example in the middle of the page of: https://lagaleramagazine.es
Example of 1 of the item:
.pt-cv-1-col img {
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
.pt-cv-1-col:hover img {
-moz-transform: rotate(10deg) scale(1.3);
-webkit-transform: rotate(10deg) scale(1.3);
transform: rotate(10deg) scale(1.3);
}
<div id="event-56092" class="ect-list-post ect-featured-event data-parent-post-id=" 56053""="">
<div class="ect-list-post-left ">
<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
<div class="ect-list-date">
<div class="ect-date-area default-schedule">
<span class="ev-day">25</span>
<span class="ev-mo">febrero</span>
<span class="ev-yr">2019</span>
</div>
</div>
</a>
</div>
</div>
<div class="ect-list-post-right">
<div class="ect-list-post-right-table">
<div class="ect-list-description">
<h2 class="ect-list-title">
<a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
</h2>
<button class="btn1 button-more svg">Más detalles</button>
<div class="p1" style="display: none;">
<div class="ect-event-content">
<p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
Ir al evento »
</div>
</div>
</div>
<div class="p1-venue">
<div class="ect-list-venue default-venue">
<span class="ect-icon">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</span>
<span class="ect-venue-details ect-address">
Area de atención al Mayor , Ayuntamiento de Badajoz,
<span class="tribe-address">
<span class="tribe-locality">Badajoz</span>
<span class="tribe-delimiter">,</span>
<abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
<span class="tribe-country-name">España</span>
</span>
</span>
<span class="ect-google">
<a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a>
</span>
<div class="ect-rate-area">
<span class="ect-rate-icon">
<i class="fa fa-money" aria-hidden="true"></i>
</span>
<span class="ect-rate">Gratuito</span>
</div>
</div>
</div>
</div>
</div>
</div>

Related

How to make wow fadeInUp work with overflow: scroll

I have a little problem when i try to add wow fadeInUp (https://wowjs.uk/docs) animation on my website. I have
overflow set to scroll in my css and it seems to disable the effects of the animation. There is a reason why i had it on scroll so i was wondering if there is a way to make it work with overflow: scroll;
Here is the website for more details: https://admiring-khorana-ad08d5.netlify.app/
.webContainer{
max-height: 100vh;
overflow: scroll;
}
<div class="webContainer">
<div class="grid-container">
<div class="grid-item text wow fadeInUp" data-wow-duration="3s"><img class="services-icon img" src="./icons/services/s1.png" alt=""> <a
class="servicesTag" href="">Acupuncture</a><br>
<div class="serv-description">
Cette pratique constitue tout acte de stimulation, généralement au
moyen d’aiguilles, de certains sites déterminés sur la peau.
</div>
</div>
<div class="grid-item text wow fadeInUp" data-wow-duration="3s"> <img class="services-icon img" src="./icons/services/s2.png" alt=""> <a
class="servicesTag" href="">Kinésiologie</a><br>
<div class="serv-description">
Le kinésiologue est le professionnel de la santé expert en activité
physique. Il vous accompagne dans l’adoption et le maintien d’un
style de vie sain et actif. Ce professionnel peut aussi vous aider à
perdre du poids. Les programmes d’entraînement conçus par les
kinésiologues peuvent aussi aider les personnes souffrant de
problèmes chroniques.
</div>
</div>
...
var wow = new WOW();
wow.init();
I'm not really sure of what you are talking about but you can use #keyframes fadeIn to make animations. Example:
p:hover {
animation: fadeIn 3.1s;
}
#keyframes fadeIn {
from{opacity: 0;}
to{opacity: 1;}
}
<div>
<p>Hello</p>
</div>
Does that answer your question
Solved it by using Jquery
if (scrolled > 25 && scrolled < 50) {
jQuery('.grid-item, .services-image').each(function(i) {
setTimeout(()=>{
$(this).show().addClass('animated fadeInUp')
}, 250 * i);
});

Vertical align image inside div bootstrap v3 [duplicate]

This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
I am not getting this image vertical centered...
<div class="col-lg-6 d-flex flex-column justify-content-center">
<h4><strong>Help</strong></h4>
<blockquote><p class="description" style="font-size: 14px;">
Als er op een pagina een <i class="fas fa-question-circle"></i> staat en u gaat daar met de muis op staan komt er een overzicht tevoorschijn met de mogelijkheden van de betreffende pagina.
</p></blockquote>
<h4><strong>Bewerken</strong></h4>
<blockquote><p class="description" style="font-size: 14px;">
Via de knop <button type="button" class="btn btn-xs" title="Voeg toe"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> kan er een nieuw item worden toegevoegd aan de huidige pagina.<br />
Als er gegevens kunnen worden gewijzigd is dit zichtbaar door een <abbr title="">stippellijn</abbr> onder de bewuste tekst. Het kan zijn dat de bewerkmodus eerst moet worden ingeschakeld via de knop <input type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>" data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> op de bewuste pagina.
</p></blockquote>
</div>
<div class="col-lg-6">
<img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza">
</div>
I have tried adding style="display: inline-block; height: 100%; vertical-align: middle;" to both div.
Also tried the class vcenter, I have even added it extra to the cssto be sure.
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
Any suggestions?
Don't think CSS is necessary here. Please try to add mt-auto mb-auto classes to the img or the second div with class col-lg-6.
If you want the img to be centered relative to the left content.
Wrap the whole thing in a flex container and add align-self: center; on the img container, now centering will be visible as long as the right container is shorter than the left one.
.flex {
display: flex;
flex-direction: row;
}
.vcenter {
align-self: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex">
<div class="col-lg-6 d-flex flex-column justify-content-center">
<h4><strong>Help</strong></h4>
<blockquote>
<p class="description" style="font-size: 14px;">
Als er op een pagina een <i class="fas fa-question-circle"></i> staat en u gaat daar met de muis op staan komt er een overzicht tevoorschijn met de mogelijkheden van de betreffende pagina.
</p>
</blockquote>
<h4><strong>Bewerken</strong></h4>
<blockquote>
<p class="description" style="font-size: 14px;">
Via de knop <button type="button" class="btn btn-xs" title="Voeg toe"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> kan er een nieuw item worden toegevoegd aan de huidige pagina.<br /> Als er gegevens kunnen worden
gewijzigd is dit zichtbaar door een <abbr title="">stippellijn</abbr> onder de bewuste tekst. Het kan zijn dat de bewerkmodus eerst moet worden ingeschakeld via de knop <input type="checkbox" data-toggle="toggle" data-size="mini" data-on="<span class='glyphicon glyphicon-pencil'></span>"
data-off="<span class='glyphicon glyphicon-pencil'></span>" data-onstyle="danger"> op de bewuste pagina.
</p>
</blockquote>
</div>
<div class="col-lg-6 vcenter">
<img src="https://picsum.photos/100/100" class="img-fluid" alt="Torza">
</div>
</div>
In the image div , add these styles
display:flex;justify-content:center;align-items:center;
So it would become
<div class="col-lg-6" style="display:flex;justify-content:center;align-items:center">
<img src="img/portfolio/torza/002.jpg" class="img-fluid" alt="Torza">
</div>

how to stick multiple buttons to multiple panels with different content

I have a website (http://defensemonkees.nl/) and we have 3 panels on the index page. I made a flex-box with 3 items in it and then i used stretch to make all the panels the same height. But I want to have the buttons stick to the bottom. I have tried a sticky footer method but it only works on one button at a time. In that case it would even be easier to just a margin-top on the 2 left buttons. But I think there must be a cleaner solution to solve the problem in general instead of just "hard-code". I don't have posted all the CSS cause most of it is handled by Bootstrap.
<div id="flexBox3Monkees">
<div class="panel panel-default item">
<div class="panel-heading">
<h3 class="panel-title">Voor wie?</h3>
</div>
<!-- end panel-heading -->
<img src="Content/Images/WebMonkee.png" alt="DefenseMonkees Logo" class="img-circle monkeyPic" />
<p class="indexP">
Krav Maga is geschikt voor iedereen! Geen enkele ervaring met zelfverdediging?
Jong, oud, man, vrouw, sportief en 'niet' sportief, bij DefenseMonkees begeleiden wij
u stap voor stap zodat u een conflict ontloopt of beëindigd op de meest efficiënte manier.
We simuleren realistische situaties en zorgen er samen voor dat u een uitstekende
conditie krijgt!
</p>
<div class="indexbutton">
Impressie
</div>
</div>
<div class="panel panel-default item">
<div class="panel-heading">
<h3 class="panel-title">DefenseMonkees</h3>
</div>
<!-- end panel-heading -->
<img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" />
<p class="indexP">
De instructeurs van DefenseMonkees zijn er trots op dat vrijwel al onze studenten
in een vrij korte periode van inspanning een gezonder en fitter lichaam hebben gekregen,
zich veiliger zijn gaan voelen en zelfverzekerder over straat durven. Dit motiveert
DefenseMonkees om continu de beste resultaten te blijven na streven.
</p>
<div class="indexbutton buttonPositionCustom2I">
Succes verhalen
</div>
</div>
<!-- end panel -->
<div id="indexPanel" class="panel panel-default item">
<div class="panel-heading">
<h3 class="panel-title"><%= GetNextTraningDate() %> </h3>
</div>
<!-- end panel-heading -->
<img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" />
<p class="indexP">Voor maar €36 per maand kunt u bij DefensMonkees 8 keer per maand trainen in Maastricht, Heerlen, Sittard of Utrecht.</p>
<p class="indexP">
Wees gerust, beginnen is heel eenvoudig! Onze professionele instructeurs begeleiden u
stap voor stap dus wacht niet langer en neem vanavond nog een gratis proefles.
</p>
<div class="indexbutton buttonPositionCustom3I">
<a href="Proefles.aspx" id="buttonRed" class="btn btn-danger btn-block indexbutton">
<span class="glyphicon glyphicon-hand-up"></span> Boek gratis proefles</a>
</div>
</div>
</div>
CSS
#flexBox3Monkees {
display: flex;
justify-content: space-around;
align-items: stretch;
text-align: center;
}
.item {
/*border: black 2px solid;*/
width: 30%;
}
#media(max-width:767px) {
#flexBox3Monkees {
flex-direction: column;
margin-top: 40px;
}
.item {
width: 100%;
}
}
Try this?
DEMO
.item {
display: flex;
flex-direction: column;
}
.panel-heading {
flex: 0 0 100%;
}
img {
flex: 0 0 100%;
}
p {
flex: 1;
}
.indexbutton {
flex: 0 0 100%;
}

Not seen full page on mobile

i have this site:
http://avocat2.dac-proiect.ro/?page_id=17
Look at the picture below to understand which is my problem
This problem is each page on mobile.
Do not see the last lines of text
<div class="entry-content2">
<div class="gigi">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 style=" "="">
<img src="http://avocat2.dac-proiect.ro/wp-content/themes/WordPressBootstrap-master/images/LOGOb.png" class="img-responsive center-block" style="min-width:156px;min-height:83px">
</div>
</div>
</div>
<div class="parentVerticalCenter">
<div class="childVerticalCenter">
<p class="text-center" style="color:white;font-size:17px;padding-left:50px;padding-right:50px;/*padding-top:20px;*/padding-bottom:20px;">În afara sediului nostru, asigurăm reprezentarea şi consilierea clienţilor noştri în Bucureşti şi în judeţele Alba, Oradea, Arad, Sibiu, Braşov, Timişoara. În domeniul proprietăţii intelectuale colaborăm cu societatea Actamarque S.R.L.Putem asigura colaborari cu notari, traducatori autorizati, consultanti fiscali.</p>
<div class="wrap">
<div class="wrap1">
<div class="image1">
<p class="titlu">Zorica L. Codoban </p>
<p class="subtitlu">Avocat</p>
<p class="bbb">
– avocat din anul 1997;</p>
<p class="bbb">
– domenii de specialitate: drept civil, drept comercial,drept succesoral, drept imobiliar, dreptul muncii,drept administrativ, dreptul familiei;</p>
<p class="bbb">- limbi vorbite: franceza.</p>
<p></p>
</div>
<div class="image2">
<p class="titlu">Sorina Sabo </p>
<p class="subtitlu">Avocat</p>
<p class="bbb">
– avocat din anul 2008, îşi desfăşoară activitatea în calitate de cabinet individual la acelaşi sediu;</p>
<p class="bbb">- domenii de specialitate: drept civil, drept comercial, drept imobiliar, dreptul familiei, drept administrativ, drept penal, proprietate intelectuală;</p>
<p class="bbb">- limbi vorbite: franceza.</p>
<p></p>
</div>
<div class="image3">
<p class="titlu">Susana Mandrutiu </p>
<p class="subtitlu">Asistent manager</p>
<p class="bbb">
– experienta in domeniu din anul 2009;</p>
<p class="bbb">- experienta anterioara ca merciolog;</p>
<p class="bbb">- limbi vorbite: franceza.</p>
<p></p>
</div></div>
<div class="wrap2">
<div class="image4">
<p class="titlu">Andaluna I. Bogdan</p>
<p class="subtitlu">Avocat</p>
<p class="bbb">
– avocat din anul 2013, îşi desfăşoară activitatea în calitate de cabinet individual la acelaşi sediu;</p>
<p class="bbb">- domenii de specialitate: drept civil, drept comercial, drept european, drept imobiliar, drept administrativ;</p>
<p class="bbb">- limbi vorbite: engleza, franceza.</p>
<p></p>
<p></p></div>
<div class="image5">
<p class="titlu">Mihai A. Codoban </p>
<p class="subtitlu">Avocat</p>
<p class="bbb">
– avocat din anul 2009, îşi desfăşoară activitatea în calitate de cabinet individual la acelaşi sediu;</p>
<p class="bbb">- domenii de specialitate: drept comercial, drept administrativ, drept fiscal, dreptul muncii, dreptul asigurărilor, dreptul pieţei de capital, proprietate intelectuală;</p>
<p class="bbb">- limbi vorbite: germana, italiana, engleza, franceza.</p>
<p></p>
<p></p></div>
<p></p></div>
</div></div>
<p></p></div>
</div>
CODE CSS:
#media screen and (min-width: 850px)
{
.image2,.image3,.image5
{
margin-left:20px;
}
.wrap1
{
margin-bottom:20px;
}
}
How can I solve this problem?
Thanks in advance!
The reason is because your mobile menu overlaps the div.
A quick solution is to add padding-bottom: 100px (or change according to what you need) to .entry-content2
I Think this is better than just adding padding bottom to the text, as in this way you avoid the overlap on the image as well.
the reason for that is because on mobile the div s overlap try using padding and more percents instead of set px lengths/padding/etc. really best thing to do is to just make a separate CSS that fits mobile and then when you are on mobile have a button or have it automatically (google it) switch to that
Try to change your ".mobil"-class
/* For Example */
.mobil {
position: fixed;
bottom: 36px;
padding-top: 0px !important;
}
and add a "padding-bottom:75px;" to your body class for example.
#media only screen and (max-width : 480px) {
body {
padding-bottom: 75px;
}
}

Text besides Image doesnt work for specific image. Why?

i use the following code to put text beside image:
<div style="display:inline-block;vertical-align:bottom">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" height="50%" width="50%" /></p>
</div>
<div style="display:inline-block;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
However, even if i change the size of my image, it is always above the text... why?
Finally i used the template "initializr" (see google), because it makes all responsive too, which i needed! thank you all anyway!
you might try adding the position property to the image
so, in this case,
image{position:fixed , absolute , relative; top:50%; left:50%;}
or this may work as well:
<div>
<image></image>
<p></p>
</div>
A commenter asked that I work with your code only. So, here's a solution using your code, to make the 2 divs sit next to each other.
<div style="float: left; width: 49%;">
<p><img alt="Cool" src="http://placehold.it/350x150" height="50%" width="50%" /></p>
</div>
<div style="float: right; width: 49%;">
<p class="text">
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>
EDITED
Below I've posted code that in my mind is better formatted for your solution. Just wanted to offer up some alternatives.
<style type="text/css">
.left {
float: left;
width: 50%;
height: 50%;
}
.left img {
width: 100%;
height: 100%;
}
.right {
float: right;
}
.movida strong {
color: #d54646;
}
.common strong {
color: #2089a4;
}
.text strong {
display: block;
font-weight: bold;
}
</style>
<div class="left">
<p><img src="CIMA/CimaMetanoia.png" alt="Cool" /></p>
</div>
<div class="right">
<p class="text">
<div><span class="movida"><strong>MOVIDA</strong>es un ministerio christiano, latino, internacional e interdenominacional con el propósito de:</span></div>
<div><span class="common"><strong>DESAFIAR</strong>al joven christiano a una entrega total a Dios y a crecer en su relación con El.</span></div>
<div><span class="common"><strong>PROVEERLE</strong>herramientas para que descubra sus dones y talentos.</span></div>
<div><span class="common"><strong>MOTIVARLO</strong>a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.</span></div>
</p>
</div>
The text is pushed below the image because the combined width of the two container divs is wider than the page, so it pushes the second div below the first one:
<div style="display:inline-block;vertical-align:bottom;width:200px;">
http://jsfiddle.net/3Luby/