Not seen full page on mobile - html

Question

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!

Answer 1

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.

Answer 2

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

Answer 3

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;
}
}