On this page http://www.prllighting.com/, I have a Photoplus widget next to a video, (below the main banner) in separate bootstrap columns and I do not understand why when the page goes below 1200 pixels the widget goes underneath the iframe video. I put them both in DIVs and defined them like this:
<div class="photoplus"><script type='text/javascript.....</script></div>
<div class="productpage-video"><iframe width="640" height="360"
src="https://www.youtube.com/embed/..."></iframe></div>
.photoplus {
display:inline-block;
width: 200px;
height:332px;
}
.productpage-video {
display:inline-block;
}
How do I edit it, so that they never overlap?
Your "photoplus" class has fixed width of 200px and it should be percentage width. (100%)
And also inner content of it also should be adjustable width like 100%;
And "productpage-video" inside this class, iframe has fixed width. That one also should be 100%.
.photoplus {
display: inline-block;
height: 332px;
width: 100%;
}
.photoplus iframe {
width: 100% !important;
}
.productpage-video iframe {
width: 100% !important;
}
But anyway when small sizes (for mobile sizes), better to move the video to second line.
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
Edit: For the sake of simplicity, I reduced my problem with overlay (see Background below) to width of a div. By doing that I however created a different and somewhat artificial problem. The accepted answer solves my real problem. The "reduced" problem is not solved there.
How can I make div with width equal to 100% of the page width? (without setting fixed min-width)
Seemingly, the solution is trivial. <div> with its 100% width should be OK by itself. That works fine unless you shrink the browser window below the page width (that's when scroll bars appear). Then the width of the <div> element is equal to the window size, not to the page size.
A note on the demonstration code: The first div simulates the page width. The divs below are my attempts to achieve an element wide across all page. If the page is big enough (more than 500px), they are rendered as expected - all over the page. But if you shrink the window (below 500px) and scroll bar appears, then the divs also shrink, although I want them to stay at 500px.
Here's the code, or check it out on jsFiddle if you prefer
/* just to see sizes of the elements */
div {
border: 1px solid red;
}
/* this simulates the width of the actual page content */
div#fixed {
width: 500px;
}
div#full1 {
width: 100%;
}
div#full2 {
width: 100%;
min-width: 100%;
}
div#full3 {
position: relative;
display: inline-block;
width: 100%;
}
/* this works fine, but uses fixed size min-width, I cannot use */
div#fullOK {
width: 100%;
min-width: 500px;
}
<div id="fixed">Width fixed to 500px</div>
The DIVs below are attempts to achieving 100% width despite scrolling. All work only if the window is wider than 500px.
<div>default</div>
<div id="full1">just width 100%</div>
<div id="full2">width and min-width 100%</div>
<div id="full3">run out of ideas</div>
<br>
<br>
<div id="fullOK">fixed min-width is the only thing that works (unusable for me though)</div>
Background: I have a page, which has an editor area that can be resized by the user. It has a modal dialog windows support, which - when invoked - shows a window and covers the rest of the page by a semi-opaque background with height and width set to 100%. It works well, unless it is viewed in window smaller than the page. Then scrolling shows part of the page not covered by the background, which looks ugly. I need to have this background spanning all over the page, not just over the visible area. Setting min-width and min-height could be done only with the help of JavaScript (due to unknown page size, as the user can resize the canvas) and I'd prefer avoiding that.
Use position: fixed for the overlay. The scrolling doesn't matter as elements that are fixed will position themselves in relation to the viewport. height: 100% and width: 100% will keep the overlay over the entire page no matter what you do.
From the MDN (emphasis mine):
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. [...]
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
font-size: 1.5em;
}
body {
background: white;
}
.cover {
position: fixed;
height: 100%;
width: 100%;
background: rgba(255, 0, 0, 0.7);
}
<div class="cover"></div>
<h1>I am overlapped!</h1>
<input type="text" value="cant touch this" />
I have CSS background image in header div. Image responsiveness works fine but I cant get it work so that content under header image "follows" image when it resizes.
Problem is that when I give height value to header image div then div height is fixed. And when I do not give height image is not shown at all.
See working example JSFIDDLE
Any help how to fix?
Here is your solution:
Issue:- Height value in percentage doesn't work, until unless it has been used in any position layer.
Solution:- Instead of height. Use "padding-bottom" OR "padding-top" value to make height responsive. Becasue percentage values work well with "padding".
The calculation is very simple to get the relevant responsive height value of any background image.
For Example:- If Background image dimensions are (1200 width) x (450 height) Pixels. Then image responsive "height" value would be: "37.5%"
Formula:- Y (×) 100 (÷) X. Which is (450×100÷1200) = 37.5%
Solution URL:- http://sandeepparashar.com/stackoverflow/responsive-css-background-image-height.html
Code:-
.custom-header-option {
padding-bottom:37.5%; /* This will make height responsive */
background-image: url('http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
If need more help, most welcome :)
I think what you're trying to do is to remove the "white space" gap?
Try this code: http://jsfiddle.net/0bjgfo16/4/
HTML
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg" />
<div class="content-wrap">
<p>here is content</p>
</div>
CSS
* { box-sizing: border-box; padding: 0; margin: 0; }
img { max-width: 100%; float: left; }
.content-wrap {
width: 100%;
height: 200px;
background-color: grey;
color: #fff;
float: left;
}
Is there a way to for web browsers to enable scrolling the entire height of a background image with background-image-size: 100%? I want to image to cover the entire viewing area horizontally, but doing so cuts of some off the image at the bottom. I want users to be able to see the rest of the image if they scroll down.
If you set to body tag a background image it will be shown in full height of page. Page height will depend on how many content on page.
From what I can tell, the answer is no. Instead, I wrapped the image in an img tag. Once it became content, scrolling worked as desired. Unfortunately it mean adding a z-index css property to the other content to get it to appear over the image.
Here's a snippet:
body {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
#image {
width: 100%;
margin: 0;
}
#content {
z-index: 100;
}
I have a sticky footer that is working fine on a music site, however, when I click on the genre with the most albums it doesn't make the page longer and they overlap. This makes the links unreadable as parts of the image in the footer are behind them.
This is my code for the sticky footer
html, body
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
}
#footer, .push
{
height: 60px;
}
Because ASP.NET inserts the main content into a form tag, you have to set the form height to 100%.
Change your CSS to the following should fix the problem:
html, body, form
{
height: 100%;
}
EDIT
In wrapper, you specify a negative space of 80px, and in the footer you specify a height of 60px. These should be the same values unless you have child elements not shown that are expanding the footer height. Try making those values the same (either both 80 or both 60, whichever fits the footer better).