Highlighted

Responsive thumbnail pics

Community Beginner ,
Jun 11, 2017

Copy link to clipboard

Copied

I need to be able to make some thumbnail pics responsive but can't seem to find a way to do it.

See link Maureen Plowman

At the base of the page are 4 images.. You will see that when you drag the browser window to a larger size (ie over 1813pxls wide) the thumbnail pics do not stick to the browser window and leave a white space in the background. I need these 4 images to resize responsively up and down in size so that they always stick to the browser window.Please advise

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

If you mean that white space on the left and right side - there´s a double arrow at the breakpoint bar outside your widest breakpoint. It shows inwards by default. Click it and it will change and direct outside.

But you should also have look at your smaller breakpoints towards mobile. These 4 thumbnails (they are more buttons that link to another page, right?) reveal a white space between them in height, while the name/font stays without resizing.

I guess you should place them under each other in this breakpoint.

Text does not resize in width and height, pictures are able to do that. You could try to adjust the aspect ratio in order to keep text inside the picture in height and you should also group picures and text in this case.

Be aware, that groups then have to be hided in other breakpoints. Otherwise they destroy your design in all other breakpoints.

In diiferent words: Use one group per breakpoint (yes the elements inside the group are duplicated then).

I realized that your hamburger menu is set to "hide target: on rollout from trigger and target (or something like this - set it to click, like this nobody could use your form.

Bildschirmfoto 2017-06-12 um 07.48.28.png

I assume it is a composition?

Does this help?

Best Regards,

Uwe

Views

107

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

Responsive thumbnail pics

Community Beginner ,
Jun 11, 2017

Copy link to clipboard

Copied

I need to be able to make some thumbnail pics responsive but can't seem to find a way to do it.

See link Maureen Plowman

At the base of the page are 4 images.. You will see that when you drag the browser window to a larger size (ie over 1813pxls wide) the thumbnail pics do not stick to the browser window and leave a white space in the background. I need these 4 images to resize responsively up and down in size so that they always stick to the browser window.Please advise

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

If you mean that white space on the left and right side - there´s a double arrow at the breakpoint bar outside your widest breakpoint. It shows inwards by default. Click it and it will change and direct outside.

But you should also have look at your smaller breakpoints towards mobile. These 4 thumbnails (they are more buttons that link to another page, right?) reveal a white space between them in height, while the name/font stays without resizing.

I guess you should place them under each other in this breakpoint.

Text does not resize in width and height, pictures are able to do that. You could try to adjust the aspect ratio in order to keep text inside the picture in height and you should also group picures and text in this case.

Be aware, that groups then have to be hided in other breakpoints. Otherwise they destroy your design in all other breakpoints.

In diiferent words: Use one group per breakpoint (yes the elements inside the group are duplicated then).

I realized that your hamburger menu is set to "hide target: on rollout from trigger and target (or something like this - set it to click, like this nobody could use your form.

Bildschirmfoto 2017-06-12 um 07.48.28.png

I assume it is a composition?

Does this help?

Best Regards,

Uwe

Views

108

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
Jun 11, 2017 0
Adobe Community Professional ,
Jun 11, 2017

Copy link to clipboard

Copied

If you mean that white space on the left and right side - there´s a double arrow at the breakpoint bar outside your widest breakpoint. It shows inwards by default. Click it and it will change and direct outside.

But you should also have look at your smaller breakpoints towards mobile. These 4 thumbnails (they are more buttons that link to another page, right?) reveal a white space between them in height, while the name/font stays without resizing.

I guess you should place them under each other in this breakpoint.

Text does not resize in width and height, pictures are able to do that. You could try to adjust the aspect ratio in order to keep text inside the picture in height and you should also group picures and text in this case.

Be aware, that groups then have to be hided in other breakpoints. Otherwise they destroy your design in all other breakpoints.

In diiferent words: Use one group per breakpoint (yes the elements inside the group are duplicated then).

I realized that your hamburger menu is set to "hide target: on rollout from trigger and target (or something like this - set it to click, like this nobody could use your form.

Bildschirmfoto 2017-06-12 um 07.48.28.png

I assume it is a composition?

Does this help?

Best 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...
Jun 11, 2017 1