I'm trying to make the controlbar bigger for ipad/android. Especially the fullscreen
button. When changing the css it's bigger but work functioning for the whole rectangle e.g.
Any ideas?
ciao Valentijn
this solution is css only.
i simply resized the all elements inside a media query, also the buttons css sprites/background images by simply adjusting the background-size and background-position properties.
the following styles are for the play, pause, fullscreen and unfullscreen buttons only, but you get the point and should be able to complete the missing buttons.
#media only screen and (min-width : 1824px) {
.mejs-container .mejs-controls {
height: 60px;
}
.mejs-container .mejs-controls div {
width: 60px;
height: 60px;
}
.mejs-controls .mejs-time-rail span {
height: 40px;
}
.mejs-container .mejs-controls .mejs-time {
height: 40px;
}
.mejs-container .mejs-controls .mejs-time span {
font-size: 20px;
line-height: 40px;
}
.mejs-controls .mejs-button button {
width: 46px;
height: 46px;
background-size: 400px;
}
.mejs-controls .mejs-play button {
}
.mejs-controls .mejs-pause button {
background-position: 0 -44px;
}
.mejs-controls .mejs-fullscreen-button button {
background-position: -90px 0;
}
.mejs-controls .mejs-unfullscreen button {
background-position: -90px -44px;
}
}
Related
I'm working on wordpress project for a friend. Unluckily (for me), she decided that site need sticky header which goes beyond my actual CSS understanding. I've created css that helps me center logo and menu below. Now I need help with making it sticky and setting logo in between menu/navbar positions.
Screen of header
[1]: https://i.stack.imgur.com/Vg3PF.jpg
a:focus {
outline: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&family=Playfair+Display+SC&display=swap');
/* center logo*/
.site-branding{
width:100% !important;
text-align:center;
}
.site-header .site-branding img {
margin: auto;
margin-top: 50px;
margin-bottom: 30px;
max-width: 300px;
}
/* center menu */
nav#site-navigation {
width: 100%;
text-align: center;
margin-right: 0px;
margin-bottom:55px;
font-size: 24px;
font-family: Playfair Display SC;
}
#media (min-width: 768px){
.woocommerce-active .site-header .site-header-cart {
width: 21.7391304348%;
margin: 0 auto;
float:none;
}
.entry-content{
font-family: Open Sans;
}
.h2 {
font-family: Playfair Display SC;
}````
you can use sticky and position : fixed for sticky items.
.sticky {
position: fixed;
top: 0;
width: 100%
}
I was curious to what this code does. I found it on a site, and I am wondering if it has anything to with device optimization. It seems to effect the whole page through all devices. Especially the part that says "#media screen and (min-width:992px)".
<style>
html {
-webkit-font-smoothing: antialiased;
}
.w-container {
max-width: 100%;
}
.w-container .w-row {
margin-left: 0;
margin-right: 0;
}
.w-row {
margin-left: 0;
margin-right: 0;
}
.w-row .w-row {
margin-left: 0;
margin-right: 0;
}
.w-col .w-col, .w-col {
padding-left: 0;
padding-right: 0;
}
.pad-row .w-col {
padding-left: 10px;
padding-right: 10px;
}
.pad-row.w-row, .pad-row .w-row {
margin-left: -10px;
margin-right: -10px;
}
/*---------------------------------*/
.slider-outer {
display: table;
width:100%;
height: 100%;
}
.slider-left, .slider-right {
display: table-cell;
width:50%;
height:100%;
vertical-align: middle;
}
.slider-left {
text-align: right;
}
.slider-right {
text-align: left;
}
/*---------------------------------*/
.w-slider-nav-invert>div {
border: white 3px solid;
background: black;
}
.w-slider-nav-invert>div.w-active {
border: white 3px solid;
background: white;
}
.w-slider-dot {
width: 1em;
height: 1em;
}
/*---------------------------------*/
.table {
display:table;
width: 100%;
}
.t-row {
display:table-row;
}
.t-cell {
display:block;
vertical-align: top;
}
#media screen and (min-width:992px) {
.t-cell {
display:table-cell;
vertical-align: top;
}
}
</style>
I know that this is css, but it seems like clever code to make the page optimizable through all devices. It is in an html embed on this site https://preview.webflow.com/preview/uniqlo-responsive?preview=aacb16f7eb6a5df89780c3f5bbee094d. You can go in there and double click on an html embed, and the code will be there.
What you're looking at is known as a media query.
The min-width: 992px you see denotes that the CSS inside of it will only trigger of viewports that are at least 992px wide (which is the equivalent of a laptop). You can think of media queries as 'conditional CSS logic' to control how a website looks on different devices.
Note that the media queries pertain to the browser width / height, not the screen width / height. As such, manually resizing your browser window will trigger media query breakpoints.
In this specific case, .t-cell { display: table-cell; vertical-align: top; } is applied when the viewport is at least 992px wide. This will make the content display in a tabular format on larger devices, while the content retains display: block for mobile devices (allowing it to stack).
I want to make my button responsive, so I can't use the image together with background. I can use the second picture of the cart only, but how can style it, so part of it remains outside?
You could apply the background-image to a :pseudo-element of a button element and position them using top and left properties.
button {
position: relative;
width: 20%;
height: 35px;
background: #B7004A;
border: none;
border-radius: 5px;
}
button:before {
position: absolute;
content: '';
width: 100%;
height: 110%;
top: -7px;
left: -3px;
background: url(http://i.stack.imgur.com/Aiy4E.png) no-repeat;
background-size: auto 105%;
}
<button></button>
Is it something like this you are looking for?
jsFiddle: http://jsfiddle.net/vgayjg9j/2/
EDIT: updated the jsFiddle. It now sticks out.
<button><img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/shoping_cart.png" /></button>
button {
width: 120px;
height: 40px;
}
button img {
height: 100%;
float:left;
}
From your question I think you want to button to fill the screen if it is on smaller devices?
Media queries is where you should start.
Also make sure you use % for the width of the button, for example if you want you button to fill the screen the css would look something like this:
button {
width: 100%;
}
And if the image should not change then I would define the width of the image in pixels:
button img {
width: 40px;
}
I currently am using a fixed header for my website: http://www.destinykingproductions.com/test/ I have attached the css I currently have. Anyone have any suggestions on why this is happening?
#main {
background-color: transparent;
margin-top: -40px;
height: auto;
max-height: none;
width: auto;
padding-bottom: 35px;
}
header#masthead {
height: 103px;
background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg);
position: fixed;
z-index: 856;
width: 100%;
margin-top: 0px;
top: 0px;
}
nav.main-navigation {
top: -200%;
background-color: transparent;
z-index: 4670;
}
nav.main-navigation ul.menu li {
padding-left: 17px;
}
nav.main-navigation ul.menu {
margin-left: 18%;
}
#shiftnav-toggle-main {
display: none;
}
Thank you for your assistance!
The comments above are correct - the "sticky" class nav is being added / toggled at some point. When you add 'display:none' to that sticky class, then it is fine on a desktop view. However, it looks like you are using that class for something with mobile because when the screen is resized smaller and back to normal then the side menu area doesn't go away. It looks like you may want to move that sticky class to your 768px media query and/or have it not show on larger screens.
/*normal css*/
.main-navigation.sticky { display: none }
#media screen and (max-width: 768px)
{
.main-navigation.sticky { display: block }
}
I'm making my first site and I'm having an issue with some buttons I've created. They are three divs within another div, and horizontally aligned. Here's the html:
<div class="buttons">
<div id="next-event"></div>
<div id="blog"></div>
<div id="about"></div>
</div>
Here's the CSS:
.buttons {
height: 200px;
}
#next-event, #about, #blog {
width: 155px;
padding-bottom: 30px;
}
#blog {
margin-right: 125px;
float: right;
height: 155px;
background: url(assets/blog.png) no-repeat;
}
#blog:hover {
background-position: -155px 0px;
}
#next-event {
margin-left: 125px;
float: left;
height: 155px;
background: url(assets/next-event.png) no-repeat;
}
#next-event:hover {
background-position: -155px 0px;
}
#about {
display: inline-block;
width: 95px;
height: 155px;
background: url(assets/about.png) no-repeat;
}
#about:hover {
background-position: -155px 0px;
}
I'm having problems when I resize the window in and out, as you can see at the site: http://madeitseries.com/
For scrolling in, how to I set it so the containing div for the yellow buttons gets longer only when the window is below a certain width?
And for scrolling out, how do I set it so the yellow buttons distribution only spreads to a certain point?
Thanks so much!
So to position the buttons, you could use a grid: http://youtu.be/0IrWRuEyXYA
Or you could use a media query to change the styles once the screen gets to a certain size so they don't overlap each other
Edit: Here's a link to the fiddle with the media query and it working properly as I imagine you want it to. I've removed the floats and margins, set the .buttons div to be the width of the buttons, set .buttons height to auto, and centred them using margin: 0 auto; http://jsfiddle.net/W6B2L/
#media screen and (max-width: 770px) {
#about {
display: block;
}
.buttons {
height: auto;
width: 185px;
margin: 0 auto;
}
#blog {
margin-right: 0px;
float: none;
}
#next-event {
margin-left: 0px;
float: none;
}
}
set the height of the buttons div to auto
if you want the buttons to resize according to the width of the screen, give them each a width of 33.33%.
Why can't you use css media query like below,
#media (max-width: 740px)
{
.buttons div
{
height: 100px !important;
width: 100px !important;
background-size: 200% !important;
padding: 0 !important;
}
}
Just copy this code into your css file.. when your webpage shrinks(resize) below 740px, then your images automatically resized as per the below code.. Like that you can customize your own codes for your desired screen resolution...
Note: Just use this code in your web page.. It might works.. And you need to customize for the hover state only..