Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review

file Responsive logo and layout

More
9 years 11 months ago #3921 by biltong
Responsive logo and layout was created by biltong
Hi Olivier,

The logos and layout does not work very well responsively.

It would be nice if the logo images reduced in size for phone screen sizes. I'm not sure why they don't because I see in your CSS that you are using responsive image css correctly - i.e. not setting the image size, height:auto and max-width:100%.

Perhaps it's because the image container is a fixed size.

Also The description text alignment to the top of the image drops with phone screen sizes in portrait and landscape.

I've attached a phone screenshot image file showing this.

Otherwise, it's working nicely!
Attachments:

Please Log in or Create an account to join the conversation.

More
9 years 11 months ago #3922 by admin
Replied by admin on topic Responsive logo and layout
I will try and reproduce the drop of the description. It definitely should not happen. Was not meant to.

As far as the logo images (resizing), the module re-arranges the logos nicely (especially when there are no descriptions). The logos are not designed to be changed in size at this time, as those images should be rather small. I don't see the point on resizing a 100x40 image, even on a small phone screen. It still has to be lisible. Now, if the module was used with logos of large size, I see your point.

This is an initial release, so not all case scenarios have been taken into account. There is definitely room for improvements.
Olivier.

Please Log in or Create an account to join the conversation.

More
9 years 11 months ago #3923 by biltong
Replied by biltong on topic Responsive logo and layout
I've created the following CSS overrides to better handle phone screen sizes - I think it look better to drop the description below the image:
@media screen and (max-width:500px){

#weblinklogo_106.list ul.weblink_items li div.description {
  display: table-row;
  padding-left: 10px;
  width: 100%;
  }

#weblinklogo_106.list ul.weblink_items li div.logo {
	width:100%;	
	text-align:left;
	}
	
}

I tend to agree with you regarding logo image resizing for smaller screen sizes, which is why I have done it as above.

Thank you.

Please Log in or Create an account to join the conversation.

More
9 years 11 months ago #3924 by admin
Replied by admin on topic Responsive logo and layout
I will look at it. Thank you so much for sharing!
Olivier.

Please Log in or Create an account to join the conversation.