I am tackling my first responsive design (using Responsive Grid System) and I am considering how to approach the site’s logo & header. I would prefer to keep it as a graphic as the font we’ve used for the logo for several years is not available as a web font, but that will conflict with the design collapsing down as far as possible. So what I would like to do is transition from the full logo & header to a small version that combines one of the logo elements with a text-only header below a certain size. Is this doable and how would I approach it?
Any chance of seeing the logo and header?
There is usually a way of making these things shrink to fit, unless it’s very awkward shape or aspect.
I am reworking it for the redesign, but I was going to do something along the lines of what I have now at the site: http://www.westeros.org/GoT/News/
That is, the shield with the W and the title of the site + the section (the shield with the dragon is probably being ditched and the dragon worked in as a background element).
You have the different graphic elements as separate images, which is a good start to make it fluid getting smaller. Though I would crop the dead space from the right of the text logo.
I think having: Shield, Text, Shield, on the smallest screen would be too cramped.
It would not be too difficult to hide one or both shields using a media query, or maybe put the text on a separate line.
It all depends on the layout you want for the small screen.
Could you give an example of how I would use a media query to hide an element? I am entirely new to using them.
This is a rough example using flex.
The title looks bad, too small, because I constrained it smaller, to the approximate size it may be when cropped. As I said it needs cropping off to lose the dead space, then it should fill better. As it is there is a gap on the right.
Same goes for the shields, they could be cropped closer to the edges for better fill. That would make the images a little bigger in this layout.
I set the query at 500px, that could be adjusted to suit.
It goes down to about 320px, which is about as small as you need to go. The images are small at that, but if cropped as I said, they won’t be so small and you can use padding to make the space around them, which will give more control. You need to visualise this with the images filling the boxes.
Thank you! I should be able to work something out from there and it gives me a sense of which direction to go when reworking the logo and header as well.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.