I am using this template for a small portfolio webpage. The problem is that when the website is opened in Chrome, a scrollbar always appears on the main page as shown below:
This does not happen in Firefox, Edge and IE. Here is a link to the demo of the template and here a jsfiddle with the CSS. Both display the unnecessary scrollbar when Chrome is used. I tried adding the following line to the html file but it didn't help:
.content {
overflow: hidden;
}
I hope that somebody can help me out here. Thanks!
Edit: The problem is somewhere here, but I cannot figure out a way to fix it.
#wrapper {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
position: relative;
min-height: 100vh;
width: 100%;
padding: 4rem 2rem;
z-index: 3;
}
#wrapper:before {
content: '';
display: block;
}
I'm on Chrome and I'm not seeing any scrollbar when I visit your demo. Or the fiddle for that matter
Not completely sure why this occurs (can indeed see the same issue) but it's super easy to workaround by simply applying overflow-y: hidden to the body
body{
overflow-y: hidden;
}
Is there something overwriting your call to hide the scroll bar elsewhere on the page? E.g:
overflow: auto;
Or is it perhaps another element on a page with a width/height (e.g image or div element) that is causing the issue?
Another option is to go to the inspector and start deleting items until you find out which one is causing the issue.
Related
Im working on an accordion drop down and using flex box to align everything on the page. However, I am running into an issue where item are being centered vertically, even though I want them to stay on top.
You can see what I mean in this code pen, I'd like the items to stay on top and only push down one side of the dropdown where clicked.
https://codepen.io/maciekmat/pen/QWLqred
.loh-faq-container{
display: flex;
margin: 2em 0 4em;
align-items: flex-start;
align-self: flex-start;
}
.loh-faq-wrap{
margin: auto;
max-width: 45%;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: flex-start;
}
To my understanding, align-items: flex-start; should work, especially when applying to the child flexbox, but I could very well be wrong. Whats going on here?
It seems to be your margin: auto; on .loh-faq-wrap that is doing this.
Change from:
.loh-faq-wrap {
margin: auto;
}
To this:
.loh-faq-wrap {
margin: 0 auto;
}
Auto margins can be used for centering things. So I would recommend reading up on that.
I've tried centering my site logo with CSS, but nothing changes. Is there a way to center the site logo on the header when using a Kalium theme?
I think it depends on the Header you are using. But as far as I see all of them are built with a flex layout.
So to give you an example for the main layout: https://demo.kaliumtheme.com/main/
In this case you could really just set the flex-direction to column and the justify-content to center:
header.main-header .logo-and-menu-container {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
In addition I would give the logo some margin-bottom:
.header-logo.logo-image {
margin-bottom: 30px;
}
Et voila, looks pretty good.
Try this code:
header.main-header .logo-and-menu-container
{
display:block;
margin-left:auto;
margin-right:auto
}
I have container with buttons on top of a map control. This control needs to be scrollable as there might be more buttons than the screen height allows for.
What I am looking for is a way to have the buttons to be displayed outside of the container which means that I can put the container off the screen to be invisible.
Or to have the scrollbar on the left hand side so that it is not between the map and the controls.
Here is some html
<div class='ctrl__scroll'>
<button class="map__interface mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
<button class="map__interface mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">remove</i>
</button>
<button>...</button>
</div>
Here is the css
.ctrl__scroll {
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: rgba(0, 0, 0, 0.5);
}
.ctrl__scroll > .mdl-button {
margin-top: 10px;
margin-left: 10px;
}
Here is the jsFiddle for the screenshot.
https://jsfiddle.net/goldrydigital/zez3gz21/
Edit: I have now worked this out and changed the jsFiddle. I am using the excellent jScrollPane plugin which allows me to do whatever I want with scrollpanes.
Even if you could display the children outside their scrollable parent (which is counter-intuitive at best) I don't think you'd be able to scroll them. However, you can't have overflow-x:visible; overflow-y:auto; on the same an element. It will automatically add a scrollbar for the X asis too.
Let's take into account that most mobile devices have nice-looking, self-hiding semi-transparent bars, making your solution look good even with the scrollbar visible (as it is now). We only need to fix the scrollbar on non-touch devices. On desktop devices, which are rendering it ugly and opaque. Here's a possible solution:
#media (min-width: 768px) {
.ctrl__scroll > .mdl-button {
margin: 10px 0 0 10px;
}
.ctrl__scroll {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow: visible;
background-color: transparent;
}
}
Add it at the end of your current CSS. Your updated jsFiddle.
Just add:
.map {
padding-left: 90px;
...
}
which is the size of your side menu
I´m trying to adapt the background image i have on my website but i cannot get it smaller on Iphones, Nexus or whatever small phone i'm testing it. I am using the Chrome developer tools to test this.
Here's a snippet on JsBin: http://jsbin.com/dacamemule/edit?output
The background image is 1920x1080 which would make it too big for small phones but i did tried to create a break point using media queries with the image size set at 768x432 but it still didn´t work. It's supposed to be an image map where the links in it will "stick" in the same place no matter if it's desktop or responsive view. The blue dot with the video is one example. There should be more dots spread throughout the map.
Thanks for your help.
If you want your image to be responsive, you might want to remove the min-width:1024px rule from img.bg. Perhaps replace it with min-width: 100%; max-width: 100%; height: auto;?
However, if you really want to use your image as background, don't use an <img> tag at all. Use the background properties of your <body> or of some helper (container) and make use of the background-size property (and the required prefixes).
Proof of concept:
body {
background:white url("http://s33.postimg.org/loiuxh5wf/Fundo.png") no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
min-height:100vh;
margin: 0;
padding:0;
overflow-x: hidden;
font-family: sans-serif;
}
.someLinks {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.someLinks>a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 45%;
-ms-flex: 1 0 45%;
flex: 1 0 45%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
color: red;
text-decoration: none;
}
.someLinks>a:hover {
background-color: rgba(255,0,0,.35);
color: white;
}
<div class="someLinks">
link
link
link
link
</div>
This is just an example. Replace the links with your actual links and remove their onlick property when you want them active.
As of now, your desired outcome is unclear and this might not fit your purpose. Please create a Minimal, Complete, and Verifiable example of your problem, properly linking all your resources. Right now, the contents of video.js, index.html and style.css are unknown to us. And so are the images you are overlaying.
change position "fixed" to "relative" on your image css.
I am trying to resize an image to be the width of its parent div; normally width: 100%; works fine, but when the parent has display: box; the img is not resized. Giving the child image box-flex: 1 has no effect.
<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
<img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>
Maybe you have solved this, but you can use (Providing example for mozilla)
IMAGE {
display: -moz-box;
-moz-box-flex: 1;
}
#cont {
-moz-box-orient: horizontal;
display: -moz-box;
}
Haven't tested the example and in worst case you need to make some tweek, but i'm pretty sure it's correct.
Granted this is an old question, however, it still shows up in searches so wanted to update with an answer:
Currently in Chrome 23 and Firefox Nightly 21.0a1 this layout works to keep the image the size of the parent div and resize (along with keeping it centered).
http://jsfiddle.net/qAErr/
HTML
<section id="holdMe">
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
</div>
</section>
CSS
#holdMe {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
}
#holdMe img {
width: 100%;
}
Browser?
I'm not aware of any browser that supports the flexbox spec without vendor prefixes.
display: -moz-box; and display: -webkit-box; etc.
Actually, I just looked at your code again... if you're using flex on the images, you don't need the width declaration since flex defines width dynamically.
You should also define the width of the parent div.