Hi, I’m a CSS and HTML newbie, though I’ve played around with them for a few years.
I’m now trying to implement an ecommerice site and have hit apon a problem that I’m not sure how to solve. I have a number of “rows” of images with “panels” of text. Where possible I want the text panel to take up a third of the screen width, and the image to take up two thirds. I also want the height on the text panel and image to be the same. Where there’s insufficient screen real estate to have them side by side, I want the text panel and image to be one below the other but taking up the entire screen width.
This I’m figuring should be “responsive” and cater for both desktop and mobile. I’m just unsure as to how to get this to work. Do I need to wrap each “line” (text panel and image) in a div? Do I need to play with min-width? Any help greatly appreciated.
Percentages should help here, also if you want things to transition smoothly if somebody scales the page then it would be an idea to use transitions too
If you can give us some code to work with, such as a link to your test site, or a simplified “working page”, we will be glad to help. Otherwise, the internet is rife with example of responsive web pages and various methods showing how to write them.
I would advise avoiding a “framework” until after you are thorougly familiar with the basics of HTML and CSS.
Responsiveness of the whole-page layout will need to be addressed separately, but you are on the right track. incidentally, I would recommend starting with your intended layout for mobile first , and then using media queries to build up your layout.
Thinking realistically , you can’t expect the height of the text and the image to be the same ( after all what size font would it be, and how much text there is would be what determine how tall the 1/3 area of the screen containing the text would have to be), not to mention am sure you will be trying to matin the aspect ratio of your image ( you don’t want tit squashed or stretched). That being said I think you could handle the module this way:
<html>
<head>
<title></title>
<style type="text/css" media="screen">
.module{
overflow: hidden;
padding: 10px;
border: 1px solid;
}
.img-hold img { width: 100%; height: auto; vertical-align: top;}
.txt-hold p{ padding:0 ; margin: 0 0 0 1em ; }
@media screen and (min-width:400px){
.txt-hold, .img-hold{ float: left;}
.txt-hold{ width:34%;}
.img-hold{ width:66%;}
.txt-hold p{ margin: 0 0 0 20px; }
.txt-hold p + p{ margin-top: 1em ; }
}
</style>
</head>
<body>
<div class="module">
<div class="img-hold">
<img src="LT0005-5-Ply-Catalog-SPA-US_3-16_thumbs.jpg" alt="LT0005-5-Ply-Catalog-SPA-US_3-16_thumbs" />
</div>
<div class="txt-hold">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
You will want to set a size limit on you container ( not shown in example) , simply because at some point, the calculated dimensions of your image will be larger than the image itself and the loss of image quality will become obvious.
Frameworks can be a bit heavy just to simple things and people think they can bypass actually learning css with them, until they inevitably run into problems.
Learning some modern css like flex-box, this kind of thing can be done without even needing any media queries, let alone the unnecessary weight of a framework.
I’d be inclined to agree. Abstracting away from the fundamentals is a great way to avoid REALLY learning the technology. Unfortunately, I’m not only stuck with a framework, but with Magento as a framework. Grr. I’ve simlified my question a bit as I’m actually implementing LESS rather than pure CSS, and I’m stuck with some pre-existing elements and thier CSS which on occasion I’m going to have to override.
I’ve heard it said a few times now that one should start with mobile. What’s the reasoning behind this? It there a typical workflow where this is a preferable approach?
I’ve heard it said a few times now that one should start with mobile. What’s the reasoning behind this? It there a typical workflow where this is a preferable approach?
Simply, the cascading nature of CSS. Want to code in the direction of simplest outcome to most complex. usually , the simplest layout is for smaller screens ( mobile). If you were to code for full size monitors first, you would have to reset many declarations that would not apply on your mobile layout.
It seems to be nicely responsive, but you need to insert some images to see how it works then because they behave differently. It’s one thing to make a dummy layout, but it must be tested with actual content, always content first, then create a layout to accommodate it.
You are using fixed heights which are generally best avoided. content should dictate height, hence ‘content first’. You are forced to add a fixed height because there is no content.
I also notice you are using in-line style attributes .
Please do yourself a favour and replace those with classes and put all the styling in the css.
.