I'm trying to change an overlapping element (text) in my css file. One line of texts (in a regular browser) appears as two lines of text in mobile, overlapped together.
This change is for the mobile version of the site (the #media section for landscape tablets)
Currently, the header (h2) text is overlapping on an iPad/tablet.
Code from the h2 #media section:
.da-slide h2{
font-size: 36px;
width: 80%;
top: 40px;
padding: 18px 20px 18px 20px;
(The .da-slide h2 is the component that holds this text in the html)
I tried the line-height property but it didn't work?
Any ideas...
Are you sure that the line-height css property has been apply to your class?
CSS
.da-slide h2{
font-size: 36px;
line-height: 36px;
width: 80%;
top: 40px;
padding: 18px 20px 18px 20px;
}
Otherwise, have you added the meta tag in the header?
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, for responsive website, be sure that the text isn't ajusted:
CSS
body { -webkit-text-size-adjust: none; }
This should do it by preventing the text from wrapping, but it will cut off the end text. i.e. won't display any text longer than the width.
Just add it to existing class:
display: block; /* may help stop any text wrapping and display it inline. */
display: inline; /* same as above */
white-space: nowrap;/* ensure no wrapping */
overflow: hidden; /* if for some reason it escapes the visible area don't display anything. */
Personally I like to use the ellipsis effect for long titles and tablet devices. Ellipsis trims the text and adds three dots where text has been trimmed.
text-overflow: ellipsis; /* if text is too long add three dots to the end to indicate text continues */
Example of effect below:
This is an extremely long and completely unavoidable page title I need to show
This is an extremely long and completely unavoidable page title I need to show
Depending on width might display as:
This is an extremely long...
Hope that helps.
enter image description here
I am assuming this is your problem if it is you can fix it by changing
line-height : 60px like change what ever your want CSS property *line-height
Related
I have a weird background bug on my site, http://www.andytechguy.com/ . You can see that when you go on a mobile browser and search the site, a part of the gradients at the top get chopped off. I have no idea what is going on with that, I didn't add anything to make that happen and it doesn't look good. Please help?
The problem is that #main_part has a fixed width of 1050px. But the rest of the site is assuming the width is about 980px. (980px in my mobile)
Just add a css rule like this:
html {
width: 1050px;
}
And you'll notice that the top bar is not longer chopped off.
However, that annoying horizontal scroll may still be there (but this time without empty space)
Nothing of this is a replacement to actually create a responsive website. That in the end is the real solution. May I suggest that you convert your website to bootstrap?
From what I can tell your h2 text is larger on mobile vs desktop. This probably has to do with font rendering and your reltive size of 1.5em.
Your background gradient is 70px tall. On mobile it is repeating itself since the header's height is greater than 70px.
I would modify your CSS like so:
CSS
#section h2 {
/* remove this */
padding: 20px;
/* add these two */
height: 70px;
line-height: 70px; /* this will vertically align the text */
}
Move your div inside "container" class and create your own custom class like below:
.custom-container{
min-width: 100%;
padding-right: 0;
padding-left: 0;
}
overall, write this
<div class="container custom-container">
<!-- ... -->
</div>
I have a responsive webpage where text is loaded from a database.
<p style="width: 95%; font-size:13px; padding-right:20px; color:#babec5; margin-top: 3px;">
Just 7 days left ... Bob, Father's Day is only one week away, s...</p>
There is more text after the '...'. The p element has two lines vertically and I would like to be able to clip off any content but still fill up the <p> if the size of the page changes.
you can use css overflow: hidden;, this will cut off the text.
If you want to have three dots at teh end, you can also use text-overflow: ellipsis; most modern browsers support that.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow?redirectlocale=en-US&redirectslug=CSS%2Ftext-overflow
in order for it to work however you need a fixed height or max-height
I'd just set the style to include overflow:hidden
e.g.
p
{
width: 95%;
height: 20px;
overflow: hidden;
}
here's a jsfiddle so you can see the effect (change bottom right panels size to see it in action)
http://jsfiddle.net/mdXCH/
Are you looking for this kind of css rules: http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-props
I've a problem laying out an e-commerce page with very strict layout requirements. We want to show a product image alongside a product description, with some optional extra information about the product below the image. The width is constrained by our overall page layout, while height can be variable. The answer seems to be "you can't do this with pure CSS".
Here's a mock up:
The marked widths are 372+12+178=562 leaving 8px in borders. The image and description areas have 2px borders, making a total of 8px horizontal pixels, and 562+8=570.
I've got the vertical centering of the image mostly sorted, what breaks the design is the optional 'extra info' panel. The site is generated by PHP, which optionally includes the <div> for that extra info if the data is available for the product. I'd be happy to always include the 'extra info' element and style it to be invisible if it's empty, if it helps solve the design problem.
Requirements:
Product image can be any aspect ratio. Some are thin and tall, some wide and short, some square.
Product image should fill its area horizontally and naturally size itself vertically by its aspect ratio.
Product image should be vertically centered in its area (blue). When extra info is not visible, image would be vertically centered alongside the Description area. When extra info is visible, image should be vertically centered in the remaining space.
Extra info can be any amount of text and aligned to bottom of product image area. So, cannot have fixed height.
Product Description can be any amount of text.
The 'image and extra info' column should vertically match the size of the 'description' column and vice versa.
Description and Extra Info boxes employ CSS gradient backgrounds and borders. All these divs must actually size themselves accordingly, I cannot get away with 'faux columns' as described here http://www.alistapart.com/articles/fauxcolumns/.
Do not want to use Javascript to align elements. Yes, I'm sure we're all jQuery masters and it's a wonderful tool, but it shouldn't be required for this layout.
My design so far employs pure CSS and no tables, using the table-cell style to center the image, but there is some fudgery to do with min-height that breaks when different size images are used. A jsfiddle: http://jsfiddle.net/GJVbX/
That fiddle is easily broken by e.g. tripling the Product Description text content, or adding "width: 370px; height: 400px;" to the so it's not a nice height.
An example of my design that works well:
However, it's not hard to find an image size that breaks it:
Note how the tall product image makes the image div extend vertically and the Description column cannot keep up.
I've been on #css IRC channel on Freenode and was told that this is possible using pure CSS, using tables for this layout task is a sign I don't understand CSS layout and should hire a professional, and that to achieve the vertical centering I should use "display: table-cell". However, extremely helpful as they were, the discussion was too complex to continue on IRC. I understand that <table> brings with it all sorts of horrible layout mechanics that is simply broken for accurate page layout, however, I can't think of a better solution, mostly because of my requirement to keep the columns the same height.
Would appreciate constructive criticism, alternative solutions, or even just confirmation of my plight :)
EDIT - here is the HTML and CSS content from the jsfiddle given above, for those who prefer this content contained within the stackoverflow question. This is extracted from the live site, cleaned a little for indentation, with a dummy product image (produced by the thumbnailer script employed in the live site) and dummy text.
HTML:
<div class="productInfo">
<div class="productTopWrapper">
<div class="productImgWrapper"><div class="wraptocenter"><span></span><img src="http://nickfenwick.com/hood.jpg"></div></div><div class="extraInfoWrapper gradientBackground"><div class="extraInfoInner">Extra info goes here.</div>
</div>
<div class="productDescription gradientBackground"><div class="productDescriptionInner">
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Yet the gradient ends too soon because this div doesn't fill its space vertically!
</div>
</div>
</div>
</div>
CSS:
DIV.productInfo {
max-width: 570px;
font-family: Verdana,Geneva,'DejaVu Sans',sans-serif;
font-size: 12px; /* Just for this fiddle */
}
.productInfo .productTopWrapper {
overflow: hidden;
margin-bottom: 12px;
position: relative;
}
.productInfo .productImgWrapper {
width: 372px;
min-height: 353px;
float: left;
border: 2px solid #cbcbcb;
text-align: center;
}
/* BEGIN css wrap from http://www.brunildo.org/test/img_center.html */
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 372px;
height: 309px;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
*:first-child+html {} * html .wraptocenter span {
display: inline-block;
height: 100%;
}
/* END css wrap */
.productInfo .extraInfoWrapper {
position: absolute;
left: 0;
bottom: 0;
width: 376px;
}
.productInfo .extraInfoInner {
padding: 5px;
border: 2px solid #cbcbcb;
text-align: center;
}
.productInfo .gradientBackground {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d1d3', endColorstr='#fefefe'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#d0d1d3), to(#fefefe)); /* for webkit browsers */
background: -moz-linear-gradient(top, #d0d1d3, #fefefe); /* for firefox 3.6+ */
background: -ms-repeating-linear-gradient(top, #d0d1d3, #fefefe);
background: repeating-linear-gradient(top, #d0d1d3, #fefefe);
}.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
}
.productInfo .productDescriptionInner {
padding: 5px;
font-size: 1.2em;
line-height: 1.2em;
}
Unfortunately, which versions of IE you are required to support affects more than just CSS3 eye-candy. display: table-cell, for example, isn't avilable in IE7. And a myriad of other things present in other browsers are missing or buggy in IE7 and IE8. IE9 is a considerable improvement however.
To be honest, even if you were restricting yourself to latest version of all browsers, this layout would still be difficult in pure CSS, whatever people on IRC may claim. When new layout managers such as Flexible Box and Grid Layout are ubiquitously available, it will be easy, but we are a few years off from that, I'm afraid.
Anyway, here is my attempt at your required layout:
http://jsfiddle.net/amtiskaw/tNywn/
It requires IE8 and above, as it uses display: table-cell to vertically centre the product image. It also has a quirk where the content of the extra-info box will never overlap vertically with the content of the product-info box, although their borders will look correct.
The stretched borders and gradients are achieved by using additional elements which are sized to vertically fill the product container element using absolute positioning, then placed behind the content using negative z-indexes.
Personally, I'd me more inclined in this case to use tables or a bit of jQuery to get the sizing right, rather than this kind of CSS hackery. If you use a table, you can give it an attribute role="presentation" to indicate to screen readers and other semantic tools that it is being used for layout purposes, rather than to express tabular data. This pattern was approved by the W3C.
You can do this with a tall height set with a negative margin. (your height minus the minimum height of your div, in this case 353px) The only problem is that the border bottom will disappear into the parent's overflow (which should stay hidden). Not sure how important the border is to you or even if that's what you were looking for, but perhaps it might point you in the right direction?
.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
height: 1000px;
margin-bottom: -647px;
}
I remember having this problem some time ago and ended up resorting to JS to resolve it. Unforunately the constraints you have are making it very difficult to come up with a working example with pure CSS. The problem as I see it is that as soon as the image increases in size the containing div no longer has a specific width or height and with CSS alone you can't make the calculations needed to expand the description div to the correct height. Browsers won't do this automatically if the element that's size changes is not the direct parent, leaving children of the parent at the heights they were pre-height / width change.
Yes tables will solve the problem with a fixed row height but as you say, they come at a price that I try to stick clear of as much as possible.
I'm presuming you've considered using JS / Jquery to solve this problem already.
Jquery example
$(function()
{
var height = $('.productImgWrapper').innerHeight();
$('.productDescription').css('height', height);
});
Note that .innerHeight() includes padding but not the border or margin. To include the border use .outerHeight().
I know it's not ideal but I can't see any other way of solving your problem. Maybe someone with higher CSS powers than I can come up with a solution.
I'm beginning to mock-up a WordPress theme based on Twitter's Bootstrap framework.
Could someone validate the code I have so far is kosher?
More specifically, the header...
I have my name and sub-head beside an avatar image.
I want the text to appear vertically in the middle of the image. This works successfully when the page is wide enough (screengrab: imgur.com/YCpSm). But, when I reduce the browser width and responsive design kicks in, the text moves up (screengrab: imgur.com/K4Vyj).
How do I ensure the text stays in the vertical center of the image?
Thanks.
--
Code: http://jsfiddle.net/robertandrews/jP4nT/ (contains standard bootstrap.css, standard bootstrap-responsive.css and custom CSS in one)
Page: http://jsfiddle.net/robertandrews/jP4nT/embedded/result/
You could go with floating elements instead of absolute positioning:
http://jsfiddle.net/jP4nT/1/
I also wouldn't place the <h1> tag within the <p>, but that's probably fine though.
This might be simpler: http://jsfiddle.net/6FMDR/
No extra html tags needed
Less css
CSS:
.myheader {
padding:15px 0 20px;
display:block;
}
.myheader img {
float: left;
padding:0 15px 10px 0;
}
.myheader h1 {
margin-top: 10px;
}
I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p