I'm trying to make the following video responsive
<abccs:avplayer data-contentid="123456789" data-width="800" data-alignment="center" data-autoplay="false" data-pr="0" data-adtagsuffix=";player=embedded" style="width: 800px; height: 450px;" class="center"></abccs:avplayer>
I originally created three separate divs and assigned them each a class then used display: none to hide them for certain screen sizes. However, having so many embeds on the page was causing the videos not to load. Any ideas on how to get it responsive? I'm not sure exactly what to target since it's not a typical YouTube or Vimeo link.
My original code was this:
<div class="media-full">
<div class="media-container">
<abccs:avplayer data-contentid="123456789" data-width="800" data-alignment="center" data-autoplay="false" data-pr="0" data-adtagsuffix=";player=embedded" style="width: 800px; height: 450px;" class="center"></abccs:avplayer>
</div>
<div class="media-med">
<div class="media-container">
<abccs:avplayer data-contentid="123456789" data-width="480" data-alignment="center" data-autoplay="false" data-pr="0" data-adtagsuffix=";player=embedded" style="width: 480px; height: 270px;" class="center"></abccs:avplayer>
</div>
<div class="media-sm">
<div class="media-container">
<abccs:avplayer data-contentid="123456789" data-width="320" data-alignment="center" data-autoplay="false" data-pr="0" data-adtagsuffix=";player=embedded" style="width: 320px; height: 150px;" class="center"></abccs:avplayer>
</div>
.media-container {
margin: 0 auto;
text-align: center;
display: block;
overflow: hidden;}
#media (min-width: 768px) {
.media-sm, .media-med {
display:none;
}}
#media (min-width: 481px) and (max-width: 767px) {
.media-sm, .media-full {
display:none;
}}
#media (min-width: 320px) and (max-width: 480px) {
.media-med, .media-full {
display:none;
}}
However, I can no longer use this method. Although it worked fine, three embeds per video caused slow load time.
Related
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
My code is from bootstrap, but what I am trying to do is add a fig caption below an image that is center aligned for only smaller screens. When I check on my computer and shrink the window, the fig caption appears and is center aligned, when i check the code on a phone simulator (for example iphone5), it is also center aligned, but when I then upload the file to the server and check my phone (which is an iphone5), the text is not center aligned like on the simulator, but is instead left aligned. So my question is what is causing this error, and how do I fix it to be center aligned.
Also, I have the footer coded in a way to disappear on smaller screens. It is the same issue as above. It disappears when i shrink the window or when I check on the phone simulator, but it doesn't disappear on the actual phone.
Thanks for the help.
HTML:
<div class="col-xs-12 col-sm-9" style="padding: 0px;">
<img src="example.jpg" style="max-width:100%; margin-top: 48px;" alt="example"></img>
<figcaption>Details</figcaption>
</div>
<footer class="footer" style="background-color: #ffffff;">
<div class="container">
<p class="text-muted">Details</p>
</div>
</footer>
CSS:
#media screen and (min-device-width : 768px) {
figcaption {
display: none;
}
#media screen and (max-width: 767px) {
figcaption {
display: block;
text-align: center;
}
#media screen and (max-width: 767px) {
.footer {
display: none;
}
It looks like you're missing the closing brackets around your #media queries.
Should be:
#media screen and (min-device-width : 768px) {
figcaption {
display: none;
}
}
#media screen and (max-width: 767px) {
figcaption {
display: block;
text-align: center;
}
}
#media screen and (max-width: 767px) {
.footer {
display: none;
}
}
But, instead of doing it manually, you could use the Bootstrap responsive utility classes. To do what you're looking for:
<div class="col-xs-12 col-sm-9" style="padding: 0px;">
<img src="example.jpg" style="max-width:100%; margin-top: 48px;" alt="example"></img>
<figcaption class="visible-xs-block text-center">Details</figcaption>
</div>
<footer class="footer hidden-xs" style="background-color: #ffffff;">
<div class="container">
<p class="text-muted">Details</p>
</div>
</footer>
i have add bootstrap class text-center in figcaption below plz refer it
<div class="col-xs-12 col-sm-9" style="padding: 0px;">
<img src="example.jpg" style="max-width:100%; margin-top: 48px;" alt="example"></img>
<figcaption class="visible-xs-block text-center">Details</figcaption>
</div>
<footer class="footer hidden-xs" style="background-color: #ffffff;">
<div class="container">
<p class="text-muted">Details</p>
</div>
</footer>
I am trying to create a page with two images side by side on desktop, then have those images stack for mobile. I am making my browser window smaller to simulate a smaller screen. The images are not stacking on mobile. Here's my html:
<div class="container-lp">
<div class="col-2-lp">
<h4>Interior Decorating</h4>
<div class="overlay">
<img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Interior-Decorating-Level-1B.jpg" alt="" />
</div>
<div class="overlay"></div>
</div>
<div class="col-2-lp last-lp">
<h4 class="landing-page">Home Staging</h4>
<div class="overlay">
<img src="http://pjstagingdecorating.com/wp-content/uploads/2015/07/Home-Staging-Level-1B.jpg" alt="" />
</div>
</div>
</div>
Here is my CSS for desktop:
.container-lp {
width: 100%;
max-width: 1280px;
min-width: 320px;
margin: 0 auto;
clear: both;
}
.col-2-lp {
float: left;
width: 45%;
margin-right: 5%;
}
.last-lp {
margin-right: 0;
}
.col-2-lp img {
width: 100%;
}
And my media query:
#media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
.col-2-lp {
width: 100%;
float: none;
margin: auto;
}
.last-lp {
margin-right: auto;
}
}
There is no problem in your code. You cannot test device media queries on pc browser try this instead
#media only screen and (min-width : 320px) and (max-width : 600px) {
}
if this functionality is all you need, I would suggest looking up bootstrap. You can achieve the same thing without touching the CSS like this:
<div class="container">
<div class="row">
<div class="col-sm-6"><img src="#"></div>
<div class="col-sm-6"><img src="#"></div>
</div>
</div>
Here's an example:
Set everything to be 100%, then above a certain width set it 50%, then it should go side by side.
.image {
width: 100%;
}
#media screen and (min-width: 780px) {
.image {
width: 50%;
}
}
Here's a jsfiddle that shows a simple example
I'm trying to apply a #media query so when the max-width reach 991px a padding-left will be added to the class, but nothing happens when the max-width reach 991px and the main of the page start to wrap under the aside, I'm using bootstrap and here is a part of the Code :
CSS
#media(max-width : 991px) {
.mainIcon {
padding-left: 47px;
}
}
HTML
<section class="mainin">
<div class="container-fixed mainIcon">
<div class="row mainFoto">
<div class="col-md-4">
<img src="images/code_big.png" alt="">
<a class="boutonCode">Code</a>
</div>
<div class="col-md-4">
<img src="images/tutoriel_big.png" alt="">
<a class="boutonTutoriel">Tutoriels</a>
</div>
<div class="col-md-4">
<img src="images/foucha_big.png" alt="">
<a class="boutonfoucha">PROJECTS</a>
</div>
</div>
<header class="globalTitle">
<h1 class="title">Turn Your Brean <span>On</span></h1>
<h2 class="subtitle">design the future</h2>
</header>
</div>
</section>
LIVE DEMO
when i inspect the page and try to reduce the width of the browser once he is less than 991px i see that the padding-left is not applied , i can't figure out how to fix this !
The issue appears to be that you're calling your media query at the top of the page but the regular styles for .mainIcon below it. This is causing the media query to be overwritten by the normal styles which would explain the adjusted padding-left being crossed out when you expect the element. A good rule of thumb is to always include your media queries below your other CSS (or at least under the class/id/etc. you're looking to change).
try:
.mainIcon {
width: 99%;
padding-top: 14%;
padding-left: 20%;
}
#media (max-width: 991px) {
.mainIcon {
padding-left: 47px;
}
}
#media only screen and (max-width: 991px)
{
.mainIcon {
padding-left: 47px;
}
}
or use !important
padding-left: 47px !important;
I am currently working on my website located over at www.a1cleaningservicesnw.com on my services page I have the following code.
<div class="container">
<div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>
Read More...
</div>
<div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>
Read More...
</div>
<div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>
Read More...
</div>
</div>
<div style="clear:both"></div>
<hr>
With this css
.column-left{ float: left; width: 33%; } .column-right{ float: right; width: 33%; 4}.column-center{ display: inline-block; width: 33%; }
What I was wondering is this: instead of it showing 3 columns on All versions and devices. When the screen size gets too small for a 3 column layout. How do I get it to display it as a single column instead? One under the other? I do not want to wright it all out again without the column tags.
Please help
Thank you.
Kevin.
You could add a media query to change columns width to 100% for the specified screen width range.
#media (max-width: 700px) {
.column-left,
.column-center,
.column-right {
width: 100%;
}
}
Reference: CSS media queries
responsive for below ipad
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
#media (max-width: 767px) {
.column-left{ float: left; width: 100%; }
.column-right{ float: right; width: 100%; }
.column-center{ display: inline-block; width: 100%; }
}
<div class="container">
<div class="column-center" align="center"><h1>Carpet and upholstery cleaning</h1><br><br>
<div align="center"> <img src="upholstery-cleaning.jpg" alt="Carpet and upholstery cleaning" width="200" height="150"></div><br><br>
Read More...
</div>
<div class="column-left" align="center"><h1>End of tenancy cleans</h1><br><br>
<div align="center"> <img src="End-of-tenancy.jpg" alt="End of tenancy" width="200" height="150"></div><br><br>
Read More...
</div>
<div class="column-right" align="center"><h1>Rug cleaning</h1><br><br>
<div align="center"> <img src="rug-cleaning.jpg" alt="Rug cleaning" width="200" height="150"></div><br><br>
Read More...
</div>
</div>
<div style="clear:both"></div>
<hr>
#media only screen and ( max-width: 479px ) {
.column-left, .column-center, .column-right {
width: 100%;
}
}
#media only screen and ( max-width: 768px) {
.column-left, .column-center, .column-right {
width: 100%;
}
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
.column-left, .column-center, .column-right {
width: 100%;
}
}
Hope this was helpfull
You should try Bootstrap grid system. I have been working with Bootstrap last two years and its very easy to learn/use. No more headache with responsive columns :)
http://getbootstrap.com/css/#grid