I'm working on a site by hand coding for the first time (mainly a print designer). I'm trying to only use HTML and CSS, as I haven't had the time to dive into any Javascript and I really want to understand what I'm using. So, my main content is set up in a grid of images, all the same size, 3 columns wide.
I'd like to use media queries for responsive design with different browser/device sizes. Best I understand this, you create different CSS files for the same HTML layout that load depending on the size of the device/browser.
As it is now, each image in the grid is set inside a div as an a tag. I then used CSS to define the image with the background property.
<div id="main-content">
<div id="project-1">
<a id="image-1" href="URL here"></a>
</div>
<div id="project-2">
<a id="image-2" href="URL here"></a>
</div>
...etc.
#image-1 {
background: url(image.png) no-repeat;
width: x;
height: y;
}
...etc.
After a bit of research, it sounds like this is not a good solution; it's better to use the tag in the HTML itself.
My question is, am I going about this the wrong way? I'm a little confused about where to put the images so that I can modify the layout with media queries. Thanks in advance for any advice. cheers!
This looks absolutely fine to me.
The only thing I'd do in your case is to add the images with an <img> tag inside the <a> in your HTML and give them all the same class, instead of putting them all in individually via CSS, as then when you define the media queries for your responsive layouts you'd only have to modify the width and height for that one class and your images would all scale accordingly. You'll just be saving yourself a bit of work.
I hope this is relatively clear. :)
Related
Everytime i work on a responsive design I wonder why all media queries are fixed on the screens width/height. Why not the width/height of an element? Is this possible?
When making reusable html elements in a somewhat modular way, it seems logical to 'scale/design' it relative to it's own width and not the screens width. This way you only have to design the HTML/CSS once and you can use it in different sections of your page without needing to add extra media queries.
Obviously there are workarounds, but is there a css-only way to add css rules depending on it's own or parents width/height?
Regards,
Pedro
ContainerQueries A.K.A. ElementQueries are still waiting to be implemented natively in CSS. I think this is very sad, but it doesn't look like that it does any progress for years now.
I mobilizing a website and would like to know if I can use one or more rather simple css rules to shrink a main div that has many nested divs and still have everything look proportonate in the smaller screen. The page is... http://www.junkyardzombiez.com/choose-a-zombie/ and the container is Any help is appreciated.
There is no magical way to to do as it's something that needs to be built into the site initially. If you had written the CSS to use % rather than PX then you would have more scope to work with but hard coded PX values mean it's built to stay at that size.
As it stands at the moment, you will need to change a number of classes to scale in width based on screen size.
It's worth looking at some frameworks like bootstrap that can help with this.
I'm trying to make text span the entire width of the page, like so:
http://www.thecut.net.au/
I've looked at the source, but am unable to make sense of how they achieve this. Some direction would be useful -- thanks.
Learn how to use your browser's inspector. It's very easy to work out what you wanted to know:
The solution for the website you mention is to use an image. Images are much easier to control the appearance of, especially when accounting for the many different browsers and screen sizes available now.
Two ways to display an image that spans the width of the webpage are:
Image tags: <img id="largeTextImage" src="image URL" style="width:100%;" />
Background Images: <div id="largeTextDiv" style="background: url(image URL) no-repeat top center;"></div>
Image is definitely the way to go if you're trying to reach a pixel perfect look and to simplify your life.
Otherwise, you could also look at using different font-sizes and using media queries so that depending on the width of the window, a different font size would show up. This wouldn't be recommended though.
Hi I'm trying to create a Responsive Email Template.
I can't make the background images responsive.
Here is a sample of the images code:
a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }
Basically We have the following images that I am having a hard time making fluid (responsive)
-logo (a#learn-more)
-banner image (.banner-img)
-learn more button (a#learn-more)
-image1 and image2
I have my demo here: http://jsfiddle.net/nLxjU/3/
Hope you can edit the code to see what my issue why I cant make them responsive.
I'm really stuck here.
You can use a different div with absolute positioning, and containing the image inside it with percentile width and height, so when the screen size changes, the div (and the image inside it) resizes, too. Just place the div below everything with z-index and you're done.
Email-clients, like Outlook (-Express), Mail (OSX) etc, all use different html-engines, and have a lot of restrictions. Especially Outlook seems to be using a limited IE6 based rendering engine. Background images and styling by css classes don't work, and forget about absolute or relative positioning.
Make sure the template also looks good in these email-clients, unless you only aim at mobile email clients (they seem to support all of this).
Take a look at the standards guide (html/css) at http://www.emailology.org/.
You can improve with the following, but as #Willem says you really need to change your approach if making an email template. Many email clients completely remove the head and strip out styles. Some support a limited set of inline styles for formatting and none for layout. In fact an old-school table layout with inline styles is generally the best way to go.
You might find some of this useful: http://www.campaignmonitor.com/guides/mobile/
As for making the best of what you've got so far:
Your .divider and .banner-img elements were set to 600px wide.
Set them as 100%.
Don't have the banner as a background image.
Size your .lpanel and .rpanel images as 100% of the parent's
width.
Demo: http://jsfiddle.net/nLxjU/
I'm drawing a blank at how to make text dynamically grow and shrink to always fit a page perfectly so that various word groups always take up the full width of various screen sizes.
I'm on a phone browser right now, so excuse me if I don't post full html examples, but here is the gist of common scenarios that I'm trying to have a technique to resolve:
<div>
<div>
<a>nav element</a> <a>another</a><a>lots of text in this nav element</a>
</div>
<div>
... another set of links wwith different text here ...
</div>
<div>
... and another ...
</div>
</div>
All told, the above layout would take up exactly three lines all the way across the screen on any screensize or window size.
A simpler example:
<h1>Hello World</h1>
Wherein not only would the h1 have a width of 100% of the screen (easy) but the text content itself would grow in font-size to fit 100% of the screen.
Similar techniques that I am aware of:
Font-stretch // except it just squashes/stretches text without regard for the text containers
Font-size:5%; // except this deals with the vertical scale of each letter.
text-align:justify; // except it just adds space instead of scaling up the font.
I'm not aware of a pure CSS way to accomplish this. I believe you have to use JS. There's several scripts and plugins out there for that. Here's one for jQuery:
http://fittextjs.com/
Media queries is probably the closest thing that exists to what you are looking for. Another good term to search for is "Responsive Design", its been a fairly hot topic on most of the designer blogs I follow in the last few months.
You can't. Not with css.
Sorry.
You can probably program something with javascript.