не удается выровнять элементы верхнего колонтитула магазина, реагируя (по вертикали) - PullRequest
Новая
       31

не удается выровнять элементы верхнего колонтитула магазина, реагируя (по вертикали)

0 голосов
/ 06 июля 2019

Важно, сайт, возможно, NSFW, некоторые обложки для электронных книг могут быть предназначены для взрослых (сайт посвящен романам для взрослых)

Привет, я настраиваю свой тестовый сайт (WP + storefront + bookshop child theme)и я получил хороший верхний бар, реальный верхний с двумя кнопками и HELP Link.Хорошо, с помощью некоторого CSS я мог бы сделать эти элементы (DIV с 3 SPANS, содержащими кнопки и текст ссылки) адаптивными.Если вы измените размер экрана браузера, вы увидите, что кнопки и размер текста BUI растут вертикально, они становятся выше.

Я хочу получить одну из этих двух вещей;

1- Получитьтекст внутри кнопок должен соответствовать ширине кнопки, чтобы она НЕ увеличивалась по высоте, сохраняя 2 кнопки одинаковой высоты 2 или выравнивая 2 кнопки и текст по центру по вертикали от большей части текста (Get daily .....) top,Середина подарочной карты, текст справки внизу.

Возможно ли это?

Примечание !!

Единственный способ получить кнопки и текст справкивыравнивание по вертикали было с этим кодом, НО в какой-то момент, когда вы изменяете размер экрана, он «ломает» текучую / отзывчивую позицию и смещается, тогда с маленькими экранами выглядит красиво.Выравнивая этот элемент с двумя другими кнопками, я получаю «некоторую» отзывчивость 

<em>/*Align Help link*/
#help{
  display:inline-block;
    padding-left: 115px;
    padding-right: 115px;
}</em>

Заранее спасибо

Здесь CSS 

@media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 182px !important;
}
}

/*Remove title from Shop page*/
.woocommerce-products-header
{display: none;}

/*Hide Pages Tite with custom Class added to PHP snippets*/
.hidetitle .entry-header { 
display:none;
}

/*Make primary Pages full width*/
body.woocommerce #primary {
    width: 100%;
}

/*Align Search Bar and make text pink*/
#woocommerce-product-search-field-0 {
    display:inline-block;
    width:100%;
    color: #fe00a1; 
    border: solid 1px #fe00a1; 
}

/*Edited Cart*/
#site-header-cart{
    padding-bottom:0px;
    width:15%;
}

/*Changed cart icon bag f\290 to to cart icon f\217 */
.site-header-cart .cart-contents:after,
.storefront-handheld-footer-bar ul li.cart > a:before {
content: "\f217";
}


/*Align Help link*/
/*#help{
  display:inline-block;
    padding-left: 115px;
    padding-right: 115px;
}

/*Align Gift card*/
/*#gift-cardl{
      margin:auto;
}*/

/*JoinAngel button style*/
.JoinAngel {
    width:auto;
    height: 35px;
    margin-top: 15px;

}
/*Center collague image*/
.collague_image {
display: block;
    margin-left: auto;
    margin-right: auto;
        width:100%;
}

/*Add top padding to rectangle*/
#rectangle {
    padding:17px;
}

/*Remove Storefront footer credit*/
.site-footer .site-info {
    display: none;
}

Здесь HTML с DIV, содержащий SPANS 

<div class="flex-container" style="text-align:center">  
<span style="display:inline-block; width:30%;height:35px;background-color:white">
<a href="http://sitetest.wigigx.com/product/gift-card/" target="_blank">
<button id="gift-cardl" style="margin: 30 auto">Gift Card</button></a> 
</span>
<span style="display:inline-block; width:30%;height:35px;background-color:white">        
<a id="help" href="https://sitetest.wigigx.com/contact/" target="_blank" style="margin: 30 auto">Help</a>
</span>
<span  style="display:inline-block; width:30%;height:35px;background-color:white">
<a id="Subscribe" href="https://newsletter.naughtyangelpublishing.com/" target="_blank">
<button class="subscribe_newsletter_btn" style="margin: 30 auto">Get Daily Book Bargains</button></a>
</span>  
</div>

Заранее спасибо за любую идею

1 Ответ

0 голосов
/ 06 июля 2019

Я могу дать вам совет.Может быть, вы можете сделать это с помощью прокрутки.

отключите встроенные стили из <span> и добавьте к своему CSS 

@media screen and (max-width: 768px) {
.flex-container span {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%!important;
    transition: transform 0.5s;
    position: relative;
    display: flex!important;
    justify-content:center;
    align-content:center;
}

.flex-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
}
.flex-container span {display:inline-block; width:30%; height:35px; background-color:white}

Или вы можете сделать все это <span> шириной 100% и подобными лестницам. 

@media screen and (max-width: 768px) {
.flex-container span {
    width: 100%!important;
    position: relative;
    display: flex!important;
    justify-content:center;
    align-content:center;
}

.flex-container {
    display: flex;
    flex-direction:column
}
}
.flex-container span {display:inline-block; width:30%; height:35px; background-color:white}
...