Highlighted

How to make my logo responsive?

New Here ,
Oct 08, 2018

Copy link to clipboard

Copied

I am redoing the website using Graze template. I placed a background and a logo on top of the background for thenotresponse.jpg header. What do I need to do to make the logo and background adjust properly for mobile, desktop sizes.logo.jpg

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

So it should be easy, shouldn´t it? Place your logo in the place to be and resize it for each breakpoint. Test it in browser and resize as desired.

Kind Regards,

Uwe

Views

242

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to make my logo responsive?

New Here ,
Oct 08, 2018

Copy link to clipboard

Copied

I am redoing the website using Graze template. I placed a background and a logo on top of the background for thenotresponse.jpg header. What do I need to do to make the logo and background adjust properly for mobile, desktop sizes.logo.jpg

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

So it should be easy, shouldn´t it? Place your logo in the place to be and resize it for each breakpoint. Test it in browser and resize as desired.

Kind Regards,

Uwe

Views

243

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 08, 2018 0
LEGEND ,
Oct 08, 2018

Copy link to clipboard

Copied

I bet, nobody here knows this „Graze“ template …

Could you describe, what happens and what you’d like to happen instead?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 0
New Here ,
Oct 08, 2018

Copy link to clipboard

Copied

I would like the logo to resize correctly on different platforms. The brick background already does.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 0
Adobe Community Professional ,
Oct 08, 2018

Copy link to clipboard

Copied

We talk about GRAZE from musegrid.com, don`t we? Did you use the responsive version GRAZE?

So we need to know, which changes you made. The logo in the template is set into the menubar like this:

Bildschirmfoto 2018-10-08 um 18.20.55.png

The breakpoints are setup as fixed width breakpoints so it should be easy to do the same for your logo, I hope?

BTW, I would delete the 320 breakpoint so it looks like this:

Bildschirmfoto 2018-10-08 um 18.20.19.png

instead of this:

Bildschirmfoto 2018-10-08 um 18.19.26.png

That was a point I mentioned to musegrid as well several times with no satisfying response so far. They also used it for their design kit, I guess. Only they know, why

Back to your question, I recommend to use the logo inside fixed width breakpoints as well and set the size for each breakpoint as desired/necessary. For my personal taste, I often don´t like the resizing and find it too small towards the smaller breakpoints.

But of course this is your decision, you´re the master

Kind Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 1
New Here ,
Oct 08, 2018

Copy link to clipboard

Copied

I understand the logo is in the middle of the menu bar but id like to put it in place of the bread image. I understand the smaller resizing doesnt look great.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 0
Adobe Community Professional ,
Oct 08, 2018

Copy link to clipboard

Copied

So it should be easy, shouldn´t it? Place your logo in the place to be and resize it for each breakpoint. Test it in browser and resize as desired.

Kind Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 1
Adobe Community Professional ,
Oct 09, 2018

Copy link to clipboard

Copied

xxnonamexx  wrote

I would like the logo to resize correctly on different platforms. The brick background already does.

Wouldn't it make the most sense to combine bricks with logo in Photoshop?  Flatten image layers and then export as JPG.  That way you're only dealing with one web image instead of 2.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2018 1
Adobe Community Professional ,
Oct 09, 2018

Copy link to clipboard

Copied

I don´t think so.

It´s better to stretch the brick.bg to browser width and place the logo in an extra layer. I would even in fluid width breakpoints keep the size of a logo. As mentioned above, for me personally the resizing gets too small often.

Kind Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2018 0