Отзывчивые вопросы по встраиванию - PullRequest
Новая
       8

Отзывчивые вопросы по встраиванию

0 голосов
/ 17 сентября 2018

Ладно, так плохо объясню, как могу. У меня есть виджет страницы бронирования на моем сайте от simplebooking. Он отлично работает на рабочем столе, но не масштабируется на мобильном телефоне Это страница вопроса: https://www.meetaroundthecampfire.com/bookings-checkout/

Так что это код, который я пытался использовать на странице, чтобы сделать его отзывчивым 

<div class="embed-container"><script src='//simplybook.me/v2/widget/widget.js'></script> <script>var widget = new SimplybookWidget({'widget_type':'iframe','url':'https:\/\/meetaroundthecampfire.simplybook.me','theme':'concise','theme_settings':{'timeline_show_end_time':'0','light_font_color':'#ffffff','sb_base_color':'#5a3afd','booking_nav_bg_color':'#ffffff','dark_font_color':'#333333','hide_img_mode':'0','sb_busy':'#dad2ce','sb_available':'#d3e0f1'},'timeline':'modern','datepicker':'top_calendar','is_rtl':false,'app_config':{'predefined':[]}});</script></div>

Со следующей CSS в таблице стилей 

.embed-container { padding-bottom: 20%; padding-top: 20%; overflow: scroll; max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 90%; }

Но это все еще не подходит, верно?

Есть идеи или помощь от ваших легенд? потому что я в замешательстве!

Приветствие Ez

1 Ответ

0 голосов
/ 17 сентября 2018

У вас есть ширина 1800px в: 

#main2 {
    margin: 0 auto 30px;
    width: 1800px;
}

Вы должны отредактировать это с помощью медиазапросов. Поставьте его по умолчанию со 100%, а затем с запросами измените его соответственно. Пример: 

//default
#main2 {
    margin: 0 auto 30px;
    width: 100%;
}

Для устройств> 768 пикселей: 

@media (min-width: 768px){
    #main2 {
       width: 750px;
    }
}

и т.д.. и т.д ...

...