Im trying to change the the height of my container from 527px (Which is the height of the background for the desktop) to make the background image hidden and make background color stretch to the bottom of the div when on mobile. The clearfix is handled from bootstrap. There are several floated divs inside of my .partbackdrop class that are not show because they are too long. No matter what I change the #PartCarContainer on the #media, besides setting it to a fixed value, it will not adjust accordingly and stretch the background to the div.
Link Removed. Problem Solved. Setting height to auto for all the divs inside the container.
CSS
#PartCarContainer { background-color: #FFFFFF; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); border-radius: 3px; overflow: visible; }
.partbackdrop { background-image: url(../../_common/img/backdrop.jpg); background-position: top center; height: 527px; }
#media (max-width: 767px) {
#PartCarContainer { height: auto; }
.partbackdrop { background-image: none; }
}
HTML
<div id="PartCarContainer">
<div class="partbackdrop">
Content
<div class="clearfix"></div>
</div>
</div>
Edit: It may be a floating problem because of the floats for the page.
I also believe the footer may be suffering from the same problem. If you shrink the window down to below 767px you will see the red background which is my problem.
You need a height:auto on .partbackdrop and on .partDivMain
.partbackdrop, .partDivMain { height:auto; }
Related
I have problem, that I don't know how to resolve.
I want to create 3 images(arrows, that I drew before) and put text inside each one, and all this should be responsive...
Here is my code:
HTML:
<div class="arrows">
<div class="arrow1">
<h2></h2>
<p></p>
</div>
<div class="arrow2">
<h2></h2>
<p></p>
</div>
<div class="arrow3">
<h2></h2>
<p></p>
</div>
CSS:
.arrows {
width: 1000px;
margin: 0 auto;
.arrow1 {
background: url("features/arrow-blue.png") top center no-repeat;
min-height: 250px;
}
.arrow2 {
background: url("/features/arrow-orange.png") top center no-repeat;
min-height: 250px;
}
.arrow3 {
background: url("/features/arrow-red.png") top center no-repeat;
min-height: 250px;
}
p {
padding: 0 300px 0 120px;
}
}
For now arrows not responsive at all, they act as cover(background)
I want to do overlay, but instead of color I want to put text.
P.S Bootstrap 2
Thanks!
I had almost exactly the same task to solve for a site I set up just 2 or 3 months ago. (I was actually putting the text inside circles, not arrows, but it's the same principle). If I show you the CSS for it you can adapt it for your arrows.
Basically I used absolute positioning to place the items over each other. The text, of course, has a z-index to overlay it, and a transparent background. Then to get the thing to be responsive, and keep that whatever text size the user might be running with, the media queries have breakpoints in em units, not px ones. The site is http://www.enigmaticweb.com, and it's the two circles containing the logo and the slogan below the logo.
The tricky bit is getting the positions exactly right so the two things stay fluidly on top of each other whatever the screen width; you will have to use trial and error to get the exact positions right. Here's the HTML:
<div id='usrSiteNameDiv'></div>
<p id='gpSiteName'><a href='http://www.enigmaticweb.com'>The Enigmatic Web</a></p>
<div id='usrSiteSloganDiv'></div>
<p id='gpSiteSlogan'>Occasional web development blog articles.....</p>
The circles aren't an image (they are actually made by a div with rounded corners and zero width/height) but that shouldn't affect you, I could have used an image underneath the text just as easily. One problem you might have is a good layout of the text; at one point in this text the browser was wrapping text in a way that made it look unbalanced within the circle, which is why you see the hard space there to force it wrap in a different way.
The CSS (for desktop screen widths) is:
#usrSiteNameDiv {
position : absolute;
border : 4px solid blue;
border-radius: 6.2em;
box-shadow : 5px 0 15px;
height : 12em;
width : 12em;
background : #99ffff;
top : 0;
left : 3em;
z-index : 2;
}
#gpHeader #gpSiteName {
position : absolute;
background : transparent;
font-size : 200%;
width : 5em;
top : 1.2em;
left : 1.5em; /* half the div width cos font in this div is twice the size */
text-align : center;
padding-left: 0.6em;
z-index : 2;
}
#usrSiteSloganDiv {
position : absolute;
bottom : 0;
left : 13.5em;
border : 4px solid #0033cc;
border-radius: 5.17em;
box-shadow : -5px -2px 2px 0px darkblue;
height : 10em;
width : 10em;
background : #99ffff;
}
#gpHeader #gpSiteSlogan {
position : absolute;
bottom : 1.7em;
left : 13.5em;
width : 9em;
background : transparent;
text-align : center;
padding-left: 1em;
font-size : 100%;
}
There wasn't much to do for the responsive part of it, except for mobiles I moved the logo to the left edge, and the slogan is taken out of the circle and just displayed in a line under the logo:
#media all and (max-width: 27em)
{
#usrSiteNameDiv,
#gpHeader #gpSiteName {
left : 0;
}
#usrSiteSloganDiv {
display : none;
}
#gpHeader #gpSiteSlogan {
bottom : 0;
left : 0;
width : 90%;
}
but since we are dealing with text, using em units for the breakpoints ensures it behaves correctly whatever text size the user is using in their browser.
I think that's everything. I hope this will give you enough info to do your design.
I have an image placed within a relative width div as part of a responsive page design. The div's width (and hence the image's size) is set to ensure that content beneath it appears above the fold on screens down to a certain resolution.
A minority of images that appear here have different dimensions (e.g. 4x5 format vs. 4x6). These taller images push the content beneath it below the fold.
I want to maintain the div's height for the 4x6 dimension, which represents the majority of images, such that when an alt format image appears here, the top and bottom of the image are evenly clipped.
I've tried a couple different approaches, none with the desired effect. Applying a max-height on the image element slightly distorts taller images. I tried max-height on the wrapper div with overflow:hidden, but that doesn't constrain the image element.
I applied max-height to that mainImage div, too, and this almost works. However, as you can see from the CSS, I'm using background-color and padding to create a border around the image. Setting max-height on the main div forces the bottom border of the image element outside of the main div. I also tried applying the border to mainImage, but the bottom border still does not appear. Lastly, with max-height applied to the div and not the image, the image is not centered vertically within the div.
I'm not sure how to accomplish what I'm after, or whether it's possible in a responsive design (i.e. without a fixed height). Any thoughts?
Here's the HTML:
<wrapper>
<header></header>
<content>
<!--the main image -->
<section>
<div id="mainImage" role="main">
<div class="in mainImageWrapper">
<img src="[IMAGEFILE]" />
</div><!--end mainImageWrapper -->
</div><!--end mainImage-->
</section>
<!-- more content -->
</content>
</wrapper>
And here's the CSS:
#wrapper {
width: 100%;
min-height:100%;
height: auto !important;
height:100%;
border: none;
}
#content {
margin: 0 auto;
width: 90%;
max-width: 980px;
}
#mainImage {
margin: 1% auto 3% auto;
width: 100%;
overflow: hidden;
}
.mainImageWrapper {
width: 100%;
max-height: 634px; /* The aforementioned fix that doesn't provide the desired effect */
overflow:hidden;
margin: 0 auto;
padding: 0;
display: table-cell;
text-align: center;
position: relative;
}
#mainImage img {
width: 97%;
padding: 1.5%;
background: #FFFFFF;
margin: auto;
vertical-align: middle;
-moz-box-shadow: 1px 2px 8px #1A1A1A;
-webkit-box-shadow: 1px 2px 8px #1A1A1A;
box-shadow: 1px 2px 8px #1A1A1A;
}
So, it appears that what I want to accomplish above isn't possible through css. I wound up implementing phpThumb and using the z-crop parameter to crop images that exceed a certain height from the center. Works well for most instances. Only issue I've encountered with this approach is that, since this is a photography website that includes watermarked images, occasionally the crop cuts off the watermark in an awkward way.
I have the code at the bottom of this post controlling a <div> within my page <div> in jQuery Mobile. I have this div to make a table scroll, as it overflows horizontally on the page. It shows up as in this screenshot, however:
This same issue occurs when it is oriented vertically, but this view illustrates it better. I have scrolled the div sideways as well to better illustrate the two borders. I want the div to simply fill the full width of the page on mobile devices, as it displays properly on larger screens, but I want it to scroll horizontally if it overflows. I have tried both overflow: scroll; and overflow: auto; in addition to trying the code with and without -webkit-overflow-scrolling: touch;. No method that I have tried for setting the width has yet worked, including width: 100%; and position: absolute; left: 0; right: 0; as suggested elsewhere.
CSS:
#media only screen and (min-width: 1025px){
.ui-page {
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
border-right: 5px #111111 outset !important;
border-left: 5px #111111 outset !important;
border-bottom: none;
}
}
#media only screen and (max-width: 1024px){
.tblscroll {
width: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
Simplified HTML:
<div data-role="page" id="resultsmain" data-title="Survey Results">
<div data-role="header"><h1>Title</h1></div>
<div data-role="content">text
<div class="tblscroll">
<table>
...table information...
</table>
</div>
</div>
</div>
you could try using a CSS display block around your div elements width defined width's and adjusting the percentages.
It appears as though its the table itself which is the issue.
I would set the table width to 100%, and fix rows that won't grow or shrink
table{ width:100%; }
This doesn't really help at all, but I loaded it up today and it works perfectly. I changed nothing from yesterday to today, so it must have been a caching issue of some sort (even though I had cleared my mobile cache).
After starting work for a new company, I've been charged with building a new site for them. This is what I've got so far:
http://ghostevolution.com/ghostds/
The problem is that it isn't working correctly on the iPad - the header background colour doesn't stretch across the full width of the screen like it is meant to - this is also true of the mid-section light-grey background colour on pages such as http://ghostevolution.com/ghostds/?page_id=160
Does anyone know why this is? Thank you.
The half-assed proper way to do this is to wrap your contents in a container that spans 100% of the screen width. For example:
CSS
.wrapper {
display: block;
width: 100%;
padding: 10px 0; /* add some top + bottom padding */
background-color: #252525;
}
.aligner {
display: block;
width: 960px;
margin: 0 auto;
}
.container {
display: inline-block;
}
HTML
<div class="wrapper">
<div class="aligner">
<div class="container">
// stuff
</div><!-- /container -->
</div><!-- /aligner -->
</div><!-- /wrapper -->
It's not the prettiest, but it allows you to throw 100% width background-colors on any section, and works in < IE8. You can do whatever you need to within div.container (float, position, etc) and it will expand the .wrapper element (thus expanding your background color).
Each div.wrapper should be treated as a "section" - 'header', 'feature', 'content', 'footer', etc...
Another alternative is to start using #media queries, which would allow you to essentially plug in code for specific screen widths (880/1024px for iPad, portrait/landscape).
#media screen and (max-width: 880px) {
.my_element {
/* attributes */
}
}
This is due to issue that is often forgotten (in desktop browsers as well). I'm pretty sure..
You see, with any desktop browser. Change the width of the window less than your wrapper width and scroll to the right. That would show the page as cut off.
This can be fixed quite easily.
removed csspivot site since its no longer running
The basic idea is to add the same background that gets cut off into element that has fixed width since browser can't do anything to that.
Add CSS:
#auxiliary .wrap {
background-color: #bbb; /* Same as the #auxiliary bg color*/
}
#branding .wrap {
border-top: 6px #92C201 solid; /* Same as #branding border and bg and height*/
background-color: #333;
height: 60px;
margin-top: -6px; /* I wouldnt necessarily use this to get it to top but works as well. */
}
I could swear I've seen articles about this problem, but I can't for the life of me find them again!
Basically if I have
<div style="width: 250px;">The width of this div should be no less than 250px wide</div>
In the code below, the content in the div isn't restricting it's width to the width specified causing an overflow problem:
<div class="PostIt">
<div id="tags"><span class="qExtraLarge">Lucky Khumalo</span>
<span class="qLarge">School</span>
a;orghaepoht8aegae[hgi'aehg[ahgiha[e8gjaerghuoaeir'ghu;dsOsgh;vrwi/jbvh?URbnIRWhb'a[985h[qygherionhbdl</div>
</div>
.PostIt { display: block; text-align: left; padding: 30px 30px 30px 30px; height: 240px !important; width: 190px !important; background: transparent url("Images/PostIt.png"); }
.PostIf #tags { width: 250px !important; }
Any suggestions would be great!
Thanks in advance.
If you want to hide any overflowing content, use overflow:hidden;
If you want to show the content and just force a line break, use word-wrap:break-word;
Setting a width on a block element alone won't stop any contents that are wider than that width from overflowing the bounds of the element. To do that you need to also set the "overflow" property. Setting it to "hidden" will simply hide anything outside the bounds, but you can also set it to other values to automatically show scrollbars, etc.
See http://reference.sitepoint.com/css/overflow for a good explanation of the overflow CSS property.
Hide your overflow.
Or more precisely
.myclass { overflow: hidden; }