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.
Related
Using just CSS can somebody please show me how to add a drop down menu on the Big Cartel Neat theme.
Need help on adding subheading to the main heading for example...
About The Brand (hover mouse and subheadings appear)
Brands Philosophy
About the Founder
About Us
header .sections {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
padding: 0 32px;
position: relative;
width: 50%;
z-index: 97;
}
header .sections .navigation {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
header .sections .navigation li {
display: block;
margin: 0 16px;
}
header .sections .navigation li a {
padding: 4px 0;
text-align: center;
I'm new to CSS also, but I'll try my best to help. This is what you can do.
#heading:hover .subheadings{
display: block
}
Basically, your #heading id (You'll probably only have 1, so you should use id.) is the "About The Brand" text. When you add hover, you can make something happen when the mouse hovers over the main heading. In this case, you can add the class .subheadings right after it and display it as a block element (The 3 subheadings will be stacked on top of each other). This will cause the subheadings to appear after you hover over the main heading. Basically, it's like an if then statement in Python.
I hope this explanation helps! Good luck :)
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.
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 am trying to vertically align my login screen. Here is my code in JS Fiddle and used the css
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;.
align-items: center;
}
I am not getting my items vertically centered. Will i wont be able to achieve it since i use bootstrap class to horizontal center.
Bootstrap 4
Bootstrap 4 is flexbox by default, and there are flexbox utility classes for centering and alignment. The align-items-center class will work to vertically center rows and columns.
Bootstrap 3.x (orignal answer)
It will center both horizontally and vertically if you make the div and it's containers 100% height:
html,
body,
.fluid-container {
height: 100%;
}
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100%;
}
Demo
Another option (for modern browsers) is to set the full height using vh viewport unit:
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
height: 100vh;
}
Demo 2
I am working on a menu bar that has all of its buttons distributed evenly in the center of the nav element (the container). I need this layout to look good on most devices, regardless of its size. The problem is, at one of the tablet sizes I am testing, only one of the buttons goes to the next line, leaving an undesirable look. Is there any way using css to have all items distributed on all lines being used evenly?
Here is the nav's style block:
nav {
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100px;
background-color: #000;
}