Картинка смещается влево

[zeta777 3]

https://fond-garant.ru

 

три картинки с надписями. Две нормально, а одна - ГАРАНТИЙНЫЙ ФОНД - не по центру. 

Подскажите пожалуйста, почему надпись на картинке может смещаться влево, если она точно такая же, как и другие надписи? 

 

<div class="col-lg-4">
<div class="main-case-box mob-ml-15 mob-mr-15 wow fadeup-animation" data-wow-delay="0.5s">
<div class="case-box">
<div class="case-img"><img src="{THEME}/images/cat1.jpg" alt="img"></div>
<div class="case-content">
<center><h3 class="h3-title case-title"><a href="/guarantees">ГАРАНТИЙНЫЙ ФОНД</a></h3></center><br><br><br><br><br><br>
<div class="case-icon"><img src="{THEME}/images/case-icon-1.png" alt="img"></div>
<p class="case-title"><a href="/guarantees">предоставление<br>поручительств</a></p>
</div></div></div></div>

<div class="col-lg-4">
<div class="main-case-box mob-ml-15 mob-mr-15 wow fadeup-animation" data-wow-delay="0.6s">
<div class="case-box">
<div class="case-img"><img src="{THEME}/images/cat2.jpg" alt="img"></div>
<div class="case-content">
<center><h3 class="h3-title case-title"><a href="/rfrp">ФОНД РАЗВИТИЯ ПРОМЫШЛЕННОСТИ</a></h3></center><br><br><br><br>
<div class="case-icon"><img src="{THEME}/images/case-icon-2.png" alt="img"></div>
<p class="case-title"><a href="/rfrp">льготные<br>займы</a></p>
</div></div></div></div>

<div class="col-lg-4">
<div class="main-case-box mob-ml-15 mob-mr-15 wow fadeup-animation" data-wow-delay="0.7s">
<div class="case-box">
<div class="case-img"><img src="{THEME}/images/cat3.jpg" alt="img"></div>
<div class="case-content">
<center><h3 class="h3-title case-title"><a href="/productivity">ФАБРИКА ПРОЦЕССОВ</a></h3></center><br><br><br><br><br><br>
<div class="case-icon"><img src="{THEME}/images/case-icon-3.png" alt="img"></div>
<p class="case-title"><a href="/productivity">обучение бережливому производству</a></p>
</div></div></div></div>

 

все совершенно одинаково, а отображается по-разному

 

Плюс нужно поднять ее наверх, я поднимаю через <br> , поднимала и через css, но на маленьких экранах она просто смещается наверх слишком сильно и ее не видно. Почему это происходит непонятно... Подскажите, где копаться? 

[master27 38]

8 часов назад, zeta777 сказал:

Подскажите пожалуйста, почему надпись на картинке может смещаться влево

style.css 186 строка, добавьте "width: 100%;" 

[zeta777 3]

31 минуту назад, master27 сказал:

style.css 186 строка, добавьте "width: 100%;" 

Спасибо огромное. Блин, столько времени промучилась ))

[zeta777 3]

48 минут назад, master27 сказал:

style.css 186 строка, добавьте "width: 100%;" 

А можно еще вопрос:  на телефонах с одинаковым размером экрана - где-то надпись помещается, а где-то нет. 

https://disk.yandex.ru/i/QtnGJYCOnq9iXg

https://disk.yandex.ru/i/iFmRWl0OArOkkA

Код, который за размер на телефоне отвечает, насколько я понимаю, вот этот:

@media screen and (max-width: 375px) {
.container{padding-left:15px;padding-right:15px}
.h1-title{font-size:20px;line-height:50px}
.h2-title{font-size:15px;line-height:50px}
.h3-title{font-size:10px;line-height:30px}
.newsletter-title h2{font-size:20px;line-height:50px}
.newsletter-form input{width:100%;padding:10px 30px;font-size:15px;color:#777777}
.service-detail h2{font-size:20px;line-height:40px}
.service-detail-box h2{font-size:18px}
.case-detail-text-box h2{font-size:20px;line-height:40px}
.pricing-box h2{font-size:18px;line-height:40px}
.blog-quote-box{display:block}
.blog-quote-box p{width:100%;padding-left:0;margin-top:25px}
.contact-help-box{margin-left:0;margin-right:0;margin-bottom:30px}
}

Почему такая разница в отображении заголовков?

 

[igorek-art 33]

1 час назад, zeta777 сказал:

А можно еще вопрос:  на телефонах с одинаковым размером экрана - где-то надпись помещается, а где-то нет. 

https://disk.yandex.ru/i/QtnGJYCOnq9iXg

https://disk.yandex.ru/i/iFmRWl0OArOkkA

Код, который за размер на телефоне отвечает, насколько я понимаю, вот этот:

@media screen and (max-width: 375px) {
.container{padding-left:15px;padding-right:15px}
.h1-title{font-size:20px;line-height:50px}
.h2-title{font-size:15px;line-height:50px}
.h3-title{font-size:10px;line-height:30px}
.newsletter-title h2{font-size:20px;line-height:50px}
.newsletter-form input{width:100%;padding:10px 30px;font-size:15px;color:#777777}
.service-detail h2{font-size:20px;line-height:40px}
.service-detail-box h2{font-size:18px}
.case-detail-text-box h2{font-size:20px;line-height:40px}
.pricing-box h2{font-size:18px;line-height:40px}
.blog-quote-box{display:block}
.blog-quote-box p{width:100%;padding-left:0;margin-top:25px}
.contact-help-box{margin-left:0;margin-right:0;margin-bottom:30px}
}

Почему такая разница в отображении заголовков?

 

Один размер экрана не означает одно разрешение. Вы смотрите через гугл свой сайт, там правой кнопкой мышки и можно выбрать экран устройства. Там и смотреть. Вполне возможно просто кеш надо очистить. Либо может такое быть что класс просто не применяется так как перекрывается родительским классом..

[zeta777 3]

1 час назад, igorek-art сказал:

Один размер экрана не означает одно разрешение. Вы смотрите через гугл свой сайт, там правой кнопкой мышки и можно выбрать экран устройства. Там и смотреть. Вполне возможно просто кеш надо очистить. Либо может такое быть что класс просто не применяется так как перекрывается родительским классом..

Спасибо. Ошибка в разных разрешениях была 

[zeta777 3]

И еще вопрос: нужно. чтобы на всех экранах было как в первом скрине, а на квадратных старых получается как на втором. Где копать? Заранее спасибо

 

https://disk.yandex.ru/i/X5mlWhE6JuZf0w

https://disk.yandex.ru/i/6GN_pXWW3edz8g

[igorek-art 33]

5 часов назад, zeta777 сказал:

И еще вопрос: нужно. чтобы на всех экранах было как в первом скрине, а на квадратных старых получается как на втором. Где копать? Заранее спасибо

 

https://disk.yandex.ru/i/X5mlWhE6JuZf0w

https://disk.yandex.ru/i/6GN_pXWW3edz8g

Вам лучше использовать свойство flex