I just created a classified ads website which has some items on the homepage, and i want to make it equal for the column height. It works well on the desktop version, but doesn't work for the mobile. I tried to use display: grid; to make it equal, but it doesn't work. Is there any other way how to resolve this?
you can use max-heigh and min-height to put some exact limitation for you divisions
something like this:
main{
width: 300px;
height: auto;
background:red;
}
.tstbx{
width:100px;
background:yellow;
max-height:120px;
min-heigh:120px;
overflow:scroll;
margin:10px;
display:inline-block;
}
<main>
<div class="tstbx">
<a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>
<div class="tstbx">
<a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>
<div class="tstbx">
<a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>
</main>
Related
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
I am trying to get my footer, which has a grey color to show this color all the way to the bottom in my responsive design. It goes all the way across the page when in PC view mode, when I take it to the mobile size, the box only shows for half of the footer and then cuts off. I am not sure why it's not working for me.
Thanks ahead of time for taking a look.
HTML:
div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Sitemap info 1</h4>
<p class="footertext">here is some site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Sitemap info 2</h4>
<p class="footertext">here is some more site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">sitemap info 3</h4>
<p class="footertext">This is some more of it.<br>
</center>
</div>
</div>
<div class="row">
<p><center>Contact Stuff Here <p class="footertext">Copyright 2014</p></center></p>
</div>
</div>
</div>
CSS:
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 280px;
background-color:#B6B6B4;
/*
You are using col-md-4 classes for your grid, causing each column take a full row in mobile view and your footer is not going all the way to the bottom of page because of its fixed height (280px).
Try using col-xs-4 for x-small devices and appropriate classes for other windows sizes.
This can be achieved by doing something like <div class="col-md-4 col-xs-6">Content</div> which means this columns will use 4 grids in desktop view and 6 grids in mobile viewport.
More documentation can be found here, under 'Grid options' section.
By the way, <center> tag is obsolete, I would recommend you to use Bootstrap's text-center CSS class.
First of all I would recommend posting your code in jsfiddle for easier debugging: http://jsfiddle.net/r7mTc/
In jsfiddle above you will see that content of the footer is way higher than the footer itself and stick out of it.
Now look here: http://jsfiddle.net/r7mTc/1/ I just deleted height line in CSS ;)
I also see few other problems in your code:
<p><center>Contact Stuff Here <p
class="footertext">Copyright 2014</p></center></p>
Tag p can contain only inline elements like span or img, so there shouldn't be nested p tags.
<p class="footertext">here is some more site map info<br>
Tag p should always has be closed, so you should add </p> after <br>
<center> tag is deprecated. Better practise is to use CSS for that - for example text-align:center for inline elements or margin:auto for blocks.
Hello all and thanks for the input.
I've looked at a number of templates but haven't felt that I've found a clean way of presenting vertically centered content of a "section" on single page layouts. I am referring to the entire section space space here, not the elements within.
The desired effect is to limit the viewable content to sections at a time and use a scroll to move to the next section on the single page ... easy enough with easing.js.
So for a psuedo markup there would be something like
<section id="topic1"
<random element>
<random element>
</section>
... Some space added to ensure no overlap of sections are viewed here ...
... e.g. margin-top: 100px or 10%
<section id="topic2"
<random element>
<random element>
<random element>
<random element>
</section>
... Some space added ...
... e.g. margin-top: 100px
...etc
As the browser moves to each section (by anchors) each one would be shown with " empty space" and it delivers a nice effect. The challenge is to always have the sections vertically centered as we change devices in a 'responsive' type approach. I've also found some inconsistencies with Internet Explorer. Understandably at certain screen sizes (say table landscape height and phones) this becomes impossible and scrolling will be necessary.
Any thoughts on a CSS approach to implement this cleanly would be appreciated.
You can do it by using a wrap and using the css properties display:table and display:table-cell together with vertical-align:middle
HTML markup with your needed wrap:
<section id="topic1">
<div class="wrap">
<div> aaaa</div>
<div> aaaa</div>
</div>
</section>
Needed css:
section{
display:table;
height:220px;
background: #ccc;
width:100%;
}
.wrap{
display:table-cell;
vertical-align:middle;
}
Living demo
Using line-height is a more simple method but you need to know the height of the section.
You can find more ways about how to accomplish it here.
There are a couple different ways to can use the Bootstrap markup to achieve what you are looking for. Here is one example:
.space {
padding-bottom: 200px;
}
<section class="container space">
<div id="scroll-to" class="row">
<div class="col-xs-6 col-xs-offset-3">
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
</div>
</div>
</section>
<section class="container space">
<div id="scroll-to" class="row">
<div class="col-xs-6 col-xs-offset-3">
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
</div>
</div>
</section>
I would try and concentrate on the offset classes and look at using .center-block and .center-text. Center-block will align your elements center, and center-text will do the same for text. This will keep you from bloating your css and keep everything predictable for responsive design.
Hope this helps.
I have a 3-column layout that works pretty well:
http://jsfiddle.net/nicorellius/YNyHW/7/
My goal is to add a pre-existing modular unit into the center div, the one with class two-inner. The markup is like so:
<html>
<head></head>
<body>
<div>
<div class="container">
<div class="one">
<div class="one-inner"></div>
</div>
<div class="two">
<div class="two-inner"></div>
</div>
<div class="three">
<div class="three-inner"></div>
</div>
</div>
</div>
</body>
</html>
The CSS can be seen in the fiddle. Part of the modular unit is actually built from some PHP where some data from a database is fetched and displayed. I have some arrays that I'm using for testing that mimic 6 entries and gives the modular unit a 2-wide by 3-tall box layout. My problem is that when I add this unit into the layout above, I get something like the test site below.
The markup for the modular unit is like so:
<section class="unit">
<section class="buttons margin-top-2em">
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 1</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 2</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 3</button>
</div>
</section>
<div class="row">
<?php // loop through some arrays to get module unit ?>
</div>
</section>
I've tried various tweaks to try and get it up but the only thing that does it is making the heights of the outer classes one, two, and three close to zero.
Although I've tried changing heights and other bits to get it to fit, I'm still having trouble figuring out why that center div won't go up. What am I missing?
The CSS for the unit class is in the fiddle. On it's own, it works OK, and I have some breakpoints that collapse it down into a single column. I just cant get passed this part...
EDIT
After trying some ideas from #kozlovski5, I am able to get the divmoving up and down as I need. But there is something going on that is making me uneasy. I'm not too familiar with the display: table, display: table-cell layout so Im sure I'm missing something. For example, when I add text to the divs in question, either the classes one, two, or three, or the inner classes, the adjustments recommended by #kozlovski5 go away. So in other words if I don't use top: -37.5em; and just fill the divs with text, everything seems to work as it should. It's when I try to model the layout with bordered sections that I get the strange behavior.
I ended up going with floats instead. See test site above for final.
I applied:
div > .modular {
display: block;
}
This seems to solve the problem. Here is an updated jsFiddle. http://jsfiddle.net/YNyHW/4/
OP has provided a test case for his website, so my updated answer is:
.two-inner {
background-color: #cba;
border: 1px solid gray;
display: block;
width: 100%;
height: 100%;
position: relative;
top: -596px;
left: 0;
}
Ugghhh.. Another Edit
I think the whole display: table and div > div. { display: table-cell;} is causing this issue and instead of working on patches let's hit the problem head straigh on instead of working on fixes.
Just get rid of the display table etc. And use floats instead here is an example:
http://jsfiddle.net/YNyHW/6/
I am planning to use a Grid system for a site, but I'd like to be able to break the grid selectively. This would mean, for example, turning an OOCSS size1of2 into a size1of1). Ideally, the html would look something like this:
<div class="line">
<div class="unit size1of2 respond-480">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="unit size1of2 respond-480 lastUnit">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
Then I'd have something like the following css:
#media screen and (max-device-width: 480px) {
.respond-480 {
/* something to linearize the box */
}
}
Does anyone know of a way to do this with OOCSS, or another grid system? I'm looking for this level of control, as opposed to a simpler responsive grid.
Turns out it makes more sense to add the respond480 class to the line rather than the unit. Not surprising. The following code works rather well for modern browsers. I used the child selector to simplify things -- though it may be possible to do a workaround, older browsers (IE<6) don't support these media queries anyway.
#media screen and (max-width: 480px) {
.respond480 > .unit {
width: auto;
float: none;
}
}
I was digging through the OOCSS source, and came across grids/grids_iphone.css. This lends some credibility to my strategy. Anyone know if !important is mandatory? Selectivity seems work for me without it -- probably due to the two class selectors.
#media screen and (max-width: 319px) {
.unit {
float: none !important;
width: auto !important;
}
}
And here's a page showing it in action. I used Nicole Sullivan's grid test from Arnaud Gueras, but with more filler text. Note that I left one 2of2 segment purposefully un-linearized, to demonstrate that it's not necessary to linearize everything.
Because she said to avoid !important unless it's a leaf node at Velocity conference, it's odd how she would put that in her code.
Check out Cascade Framework. It has an OOCSS architecture and supports responsive design out of the box (although it is optional and can be left out if you want).
With Cascade Framework, you'd implement your example like this :
<div class="col">
<div class="col size1of2">
<div class="cell">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="col sizefill">
<div class="cell">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>