Inspiring

Answered

How do I use different logo sizes (responsive) on Skeleton format?

Forum|Forum|9 years ago
March 3, 2017
1 reply
1223 views

Hello all,

I have been trying to learn how to put together responsive sites using the Skeleton boilerplate. Skeleton: Responsive CSS Boilerplate It's going well, pretty straight forward, but I'm trying to figure out how to code for different versions of a logo for different orientations and devices. Anyone know how to do that? Media queries, I would imagine, but how does one go about changing or adding to the existing CSS?

Any ideas? Thanks!

Dave

This topic has been closed for replies.

Correct answer BenPleysier

Media queries are useful when using background images as in

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

For foreground images it is best to use <picture>-<source>-<img> combination as in

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>

The examples were copied from Responsive Web Design Images. If you Google the subject 'picture element' you will come across articles like Built-in Browser Support for Responsive Images - HTML5 Rocks

BenPleysier

Correct answer

Community Expert

Media queries are useful when using background images as in

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

For foreground images it is best to use <picture>-<source>-<img> combination as in

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>

The examples were copied from Responsive Web Design Images. If you Google the subject 'picture element' you will come across articles like Built-in Browser Support for Responsive Images - HTML5 Rocks

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

pziecina

Legend

Just like to say thank you for posting this Ben

pziecina

Legend

pziecina wrote
Just like to say thank you for posting this Ben

Never going to work unless the website is completely controlled by the web-developer. As said before no client who uploads images via a CMS is going to mess around sizing up 3 images correctly. Resizing on the fly is possible but its a 'design hack' in terms of layout as the images will never be cropped at their best on tablet or smartphone.

The correct cropping of an image can only be done manually, anything else is a failed concept in my opinon. Just putting it out there so people dont think this is the 'holy grail' solution for responsive images.

The only solution for faster download on mobile devices is faster download speeds and lower bandwidth prices. Maybe they will come maybe they wont but until they do this is a grey area which can only be controlled by those that are willing to spend time optimising and cropping images across the devices manually. I cant see myself doing that for 200 images as you will end up with 600 'uniquely' sized/cropped images to manage, madness. Might be ok for a site with a few pages and limited number of images, for anything else its a non-starter.

I was surprised when your post landed in my mail, as i had completely forgotton about this discussion.

I'm positive a simpler method of creating image sets for use with srcset and its css equivalent image-set, could be created if enough people wanted such a feature. It would not solve everyone's requirement but very little ever does.

The reason it will never happen, is because most of those who represent Dw users to the Dw team, do not create web sites or only do so with nothing beyond the point and click, no knowledge required features. If you were to ask that group, (known as CAB) only a handful will know what the W3C is, (let alone what it does) or have any idea about what is happening in the web development world, (most think the W3Schools site is the W3C).

Dw has gone backwards because many in that group, never actually build modern web sites, from the ground up. If you look at many Adobe products they use html5, css and javascript, and include a javascript debugger in their tool set for users. Yet the program that should have the best tools for html5 and javascript, the majority of that above mentioned group thinks users do not require them, probably because they cannot use them, or have no idea what to use them for. They certainly have no idea what browsers and devices support regarding W3C specs.

Only very few of that group post in this forum, (they know who they are, and in general the criticism is not aimed at them) but they are in the minority of that groups members. 7 years ago many of that group posted in this forum. If we and that group do not want to talk about what is missing and what is required for the modern web, the support required from programs, and the use and development of tools to use those features, then no one should be surprised when people try Dw, and decide it's no better than a free code editor, (which is true).

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded