Question

好吧，我尽可能地解释这一点。我的网站上有一个Simplybooking的预订页面小部件。它在台式机上效果很好，但无法在移动设备上扩展这是相关页面：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

Answer 1

您的宽度为1800px，位于：

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

您应该使用媒体查询进行编辑。默认情况下将其设置为100％，然后在查询中进行相应更改。示例：

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

对于768px以上的设备：

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

等等等...

嵌入问题

1 个答案: