I'm working on this site:
http://miketest.best/
But for some reason, the finger scrolling up and down isn't working on phones. Tried overflow-y: scroll in the .slide-container > section but it isn't working. Desktop mousewheel and arrows works.
What can I be missing? I just want the contents in each section element to be able to scroll through on phones and computers. Preferably with the side scroller hidden.
.slide-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: hidden;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
.slide-container > section {
height: 100vh;
width: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
scroll-snap-align: start;
overflow: scroll;
overscroll-behavior-y: contain;
padding: 100px 1em 1em;
}
If you are running WordPress, it is most likely a plugin that doesn't play nicely with the others or with your theme.
try switching your theme to one of the official Automattic themes like TwentyEighteen or others. See if that fixes the problem.
disable all plugins, then one by one, re-enable them, checking each time to see if the problem comes back.
If neither of those approaches work, you should ask in the official WP Support forums.
Related
I've been trying to debug a CSS flex issue for a few hours. I need the three boxes in each row to have the same height. I've used flex quite a few times and think it might be an issue with floats but clearing them didn't seem to solve any obvious issues. It's likely that I'm overlooking something very simple.
Dev Page with Float Issues
.circle-box-table-container {
width: calc(100% + 42px);
margin: -10px;
overflow: hidden;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.col-xs-12.col-sm-12.col-md-4.circle-box-alt-blue-border {
display: inline-flex;
flex-shrink: 0;
}
I see you used height 100% inside your box. you need to modify some css,
.circle-box-content-text{
height: auto;
}
.circle-box-content-heading{
height: auto;
}
.circle-box-content-containter{
height: 100%;
}
do this way, hope your height issue will fix.
Not a frontend developer just trying to use the template in my Django project.
I tried customizing the CSS of SB Admin 2 Theme using sass but I'm having trouble locating the right elements to edit. I went into the CSS (Github) it's all messy I have no idea how to deal with it. I put it through the sass compiler but no luck there. I will really appreciate it if someone can help.
All I want to do is:
Make the sidebar fixed in collapsed state and un-toggleable.
Regarding your first issue
Make the sidebar fixed in collapsed state and un-toggleable.
The following should do the trick:
body{
margin-left: 6.5rem;
}
.sidebar,.sidebar.toggled {
width: 6.5rem;
overflow: visible;
position: fixed;
left: 0;
height: 100vh;
max-height: 100vh;
z-index: 9999;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
display: hidden!important;
visibility: hidden!important;
-ms-overflow-style: none!important; /* IE and Edge */
scrollbar-width: none!important; /* Firefox */
}
#sidebarToggleTop {
display: none!important;
visibility: hidden!important;
pointer-events: none!important;
}
This goes at the end of your style.css file. Tell me if that's working for you.
Regarding your second issue
Blockquote Make the box with area graph flex width so I can replace the graph with a table tag.
I'm not quite sure I understand, could you go in more details.
I'm using chrome both on my laptop and on my iphone.
I created a simple example that demonstrates the problem: https://s3.us-east-2.amazonaws.com/asteroid-public/test/test.html
Try viewing that page on your desktop/laptop. The messages render correctly, not overlapping each other. Even when you use the DevTools to view the page as if you are viewing on a mobile device, it still works fine on the laptop. Now, try viewing it on your chrome app on your mobile phone. The messages all overlap each other and so it is hard to read.
Here are some screenshots showing the difference:
Why is this happening and how do I fix it on mobile?
It looks like your .chat .message css properties are causing this. I understand what you tried to do by doing this:
.chat .message {
margin: 4px 16px;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
However what is causing your problem seems to be the display property. I hope that helps.
.chat .message {
margin: 4px 16px;
white-space: nowrap;
//display: flex;
//flex-direction: row;
align-items: center;
position: relative;
}
I suggest making all div class="message" include a div class="inner". In this way, you can have your div class="inner" at a width: 80%; and display: block;, and your messages have width: 100%; and height: auto;. You can set alignment rules on div class="message" by using .message[origin-me] and .message[origin-them] to set where the div class="inner" aligns. I hope this helps!
I am using the swiper.js as an infinite carousel used for an image select. One image on each page. When you select an image, it dims, and a checkmark appears.
This works perfect on every browser but iOS 10 webkit. It also gets broken even more in iOS Chrome which is an older version of Safari. To make matters worse, the MacOS Safari developer tools give me a completely different result. I'm totally lost here.
What could be causing the checkmark not to center responsively in Safari?
Not on Safari -- Everything Works!
Safari -- The checkmark moves around the screen when scaled.
HTML
<div class="swiper-slide">
<div>
<img class="imageselection" src="img/1.jpg">
</div>
<div class="checkmark">
<img src="img/checkmark.png">
</div>
</div>
CSS
.checkmark {
visibility: hidden!important;
position: absolute!important;
}
.checkmark.checkmarkon {
visibility: visible!important;
position: absolute!important;
transition: .03s ease!important;
opacity: 1;
}
.imageselection {
position: relative !important;
margin-top: 0%!important;
}
img.imageselection.opacity {
opacity: 0.3;
}
First, everyone who downvoted me can DIAGF. You are all dicks.
Secondly, WebKit is backwards. My problem stemmed from poor Apple documentation, and a lack of general WebKit information. It would be great to ignore it, but if you want something to work on iOS you should probably start there as other engines adapt better than the other way around.
Finally, the answer was found here: https://codepen.io/shshaw/full/gEiDt
Someone who definitely is a good human, with a soul.
The relevant code change was this:
.checkmark {
visibility: hidden!important;
position: absolute!important;
margin: auto !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto%;
display: -webkit-box !important;
display: -ms-flexbox!important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
-webkit-justify-content: center !important;
justify-content: center !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
-webkit-align-items: center!important;
align-items: center!important;
}
You hopefully can ignore the !importants :-). I'm too lazy to edit the core css of the swiper.js and onsenui framework.
I have a block on my page where 2 images should stand next to each other. Depending on there width, they should scale accordantly.
Thank god we have Flexbox for that!
Now this demo works in Chrome, Safari, FF and IE Edge:
http://codepen.io/IbeVanmeenen/pen/PqgOJM
.el {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 4rem 0;
}
.el__wrp {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
justify-content: space-around;
min-width: 0px;
}
But the problem is that in IE11 and 10, the flex shrink seems to be ignored, resulting in the first image been shown full width and the second one disappearing...
Anyone have a clue how to fix this..?
Thanks in advance
Ok, fixed this!
I updated the pen.
I tested the original code, but replaced the images with text, and it worked! So the problem was the images.
Original code for the images was:
.el__wrp img {
display: block;
margin: 0;
max-width: 100%;
min-width: auto;
}
And I changed it to:
.el__wrp img {
display: block;
margin: 0;
width: 100%;
}
It all works now!
The IE 10 and 11 has bug when using min-height. It's known issues and you can find the issue for example here https://caniuse.com/#search=flex