Okay so ill explain this as best i can.
I have a booking page widget on my website from simplybooking.
It works great on desktop but does not scale on mobile
This is the page in question : https://www.meetaroundthecampfire.com/bookings-checkout/
So this is the code ive tried to use in the page, to make it responsive
<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>
With the following css in the stylesheet
.embed-container { padding-bottom: 20%; padding-top: 20%; overflow: scroll; max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 90%; }
But it still doesnt come up right?
Any ideas or help from you legends? because im confused!
Cheers
Ez
You have width 1800px at:
#main2 {
margin: 0 auto 30px;
width: 1800px;
}
You should edit this with media queries. Put it by default with 100%, and then with queries change it correspondingly. Example:
//default
#main2 {
margin: 0 auto 30px;
width: 100%;
}
For devices > 768px:
#media (min-width: 768px){
#main2 {
width: 750px;
}
}
etc. etc...
Related
I made an app with Ionic framework and I have a problem on some devices.
This is my homepage :
And on some devices (iPhone 5S, iPhone 5C, Samsung S5), the page is displayed like this :
This page is made with an ion-grid.
Here is a part of my css :
ion-grid{
height: 100%;
ion-row.homeM{
height: 20%;
img{
height: 80%;
}
p{
margin-top: 0px;
}
}
ion-row.homeML{
height: 25%;
img{
height: 75%;
}
p{
margin-top: 0px;
}
}
}
ion-row.homeM is for portrait display and ion-row.homeML is for landscape display.
Help is welcome :) !
Thanks
Did you try to specify a max-height in px, dpi, em or other unit?
This may be related to a resolution/space issue because of the percentage in the css.
Try something like:
ion-grid{
height: 100%;
ion-row.homeM{
height: 80px;
img{
height: 60px;
}
p{
margin-top: 0px;
}
}
ion-row.homeML{
height: 60px;
img{
height: 40px;
}
p{
margin-top: 0px;
}
}
}
To create Responsive design try using "vh for height" and "vw for width" or "em"
instead of "px or %"
soo try this:
ion-grid{
height:98vh;
ion-row.homeM{
height: 40vh;
img{
height: 100vh;
/*you can add max-height to prevent img to be stretched*/
max-height:100px;//for example
width:30vw;
}
p{
margin-top: 0px;
}
}
}
I hope this help and you can know more about what I said From here :
ViewPort Unit
I'm using Photoswipe Masonry Gallery plugin (WP), but when the images are double-tapped or pinch-zoomed, they get distorted.
Any idea what is causing this? It's not a plugin issue, as it works perfectly when switched to Twenty Fifteen theme. FYI, I'm using <meta name="viewport" content="width=device-width">. Anything suspicious in the below CSS I'm using?
#media screen and (max-width: 700px) {
/* basics */
#content,
#sidebar,
.endbar_left,
.endbar_right {
float: none;
width: 100%;
}
#content {
margin-left: 0%;
padding-left: 0%;
padding-top: 20px;
}
html,
body {
width: auto !important;
overflow-x: hidden !important;
}
img {
border: none;
max-width: 100%;
height: auto;
}
#header {
padding-bottom: 0 !important;
}
/* posts */
.inside2 {
padding: 0 10px 10px 10px;
}
.post {
padding-right: 3px;
}
.pics_article {
float: none;
margin-left: 0;
}
}
Thank you in advance for your help. FYI, I'm not a web developer. Someone with okay html/css knowledge. Thanks!
Just found the solution by myself! It was !important; in my img properties (not in the above-posted #media query, but in the main part of CSS) causing this distortion. Removing !important; from the below has resolved the issue.
img {
border: none;
max-width: 100% !important;
height: auto;}
I have a responsive site that works perfectly fine on all desktop browsers as well as mobile Chrome, resizing the way I want no matter how narrow the window gets, but I'm getting a horizontal scroll on mobile Firefox. My content is just slightly too big, although I can't imagine how with my CSS. Here's what I believe is relevant:
#main {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.infoSection {
display: inline-block;
height: 300px;
margin-bottom: 75px;
}
.infoSection img {
position: relative;
float: right;
max-width: 50%;
top: 50%;
transform: translateY(-50%);
}
#media (min-width: 0) and (max-width: 470px) {
.infoSection {
height: auto;
margin: 0 0 30px;
}
.infoSection img {
display: block;
float: none;
max-width: 80%;
margin: 20px auto 0;
transform: none;
}
}
Existing questions about horizontal scrolling on mobile all seem to involve setting overflow-x to hidden, which doesn't help because I want my content to resize properly. :/
My wordpress blog (workmoneyfun.com) is on Genesis Framework Prose Theme which is fully mobile responsive. However, I increased the width of website content area which has resulted in non-optimized for mobile. I had added the following codes to increase width.
body {
background: #f5f5f5;
margin: 0 auto;
width: 1080px;
}
#inner {
width: 1070px;
padding: 0 10px;
}
.content-sidebar #content-sidebar-wrap {
width: 1040px;
}
.content-sidebar #content {
width: 680px;
}
.sidebar {
width: 320px;
}
.full-width-content #content {
width: 1000px;
}
.footer-widgets-1, .footer-widgets-3 {
width: 330px;
}
.footer-widgets-2 {
width: 280px;
}
How do I make my site mobile optimized with the current increased width area? Please suggest. Thanks.
I suggest to use % instead of px, use media query for the responsive.
I used this fix for Bootstrap modals on mobile devices as a base for some new code:
bootstrap-responsive.css
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
bottom:3%;
width: auto;
margin: 0;
}
.modal-body {
height: 60%;
}
bootstrap.css
.modal-body {
max-height: 350px;
padding: 15px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
The problem is I'm having is I get extra space at the bottom of the modal.
How can I remove this space?
I made a fiddle that demonstrates the issue.
Try changing the height of the browser in this fiddle with a width of 480. The modal-footer should stick at the bottom but its not, when I remove the bottom:3% in .modal everything looks fine like this or this but the height of .modal overlaps the height of the screen and its not responsive
You could check to see if the orientation is landscape - and minimize the size of the modal-body accordingly
FIDDLE
#media only screen
and (orientation : landscape) {
.modal-body {
height: 160px;
}
}
Oh and by the way:
In the fiddle I fixed up the rounded corners of the model as well by adding the class:
.modal-footer
{
border-radius: 0 0 4px 4px;
}
I believe your problem is your form inside the Modal.
Put this to your CSS.
.modal form{ margin: 0 !important;}
Remove padding-bottom:
.modal-body {
max-height: 350px;
padding: 15px;
padding-bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
I checked the code if u try commenting the bottom attribute given to the modal, i think this is what u r looking for.
.modal {
position: fixed;
top: 3%;
right: 3%;
left: 3%;
/*bottom:3%;*/ /* if u comment this the issue gets resolved */
width: auto;
margin: 0;
}
Also make change your modal footer css so it takes the same rounded-corners as the modal
.modal-footer
{
border-radius: 0 0 3px 3px;
}