improve the banners for small devices

Do you have an idea for the Joomla community that you can help implement? Discuss in here.
Locked
sofian
Joomla! Apprentice
Joomla! Apprentice
Posts: 48
Joined: Tue Mar 31, 2015 6:34 pm

improve the banners for small devices

Post by sofian » Fri Sep 11, 2015 5:14 pm

hi
in joomla 3 the theme is 100% responsive (great and exelant) .
when i add an image banner with size : width=1200px height=80px ,
it will show all the image on mobiles (resizing it because responsive) .

but the image contents will be very small (the text and detials) .

i want to suggest to add a new options in banner component that add another image for small devices .

this will be like this :
For devices have screen width from 1200px to greater.
add image for this size

For devices have screen width from 768px up to 1199px.
add image for this size

For devices have screen width from 480px up to 767px.
add image for this size

For devices have screen width less than or equal 479px
add image for this size

i hope that i explained it good .
and i hope to see this idea be on joomla .

thank you

 
User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2516
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: improve the banners for small devices

Post by AlexVega » Fri Sep 11, 2015 5:21 pm

Hi there!

Although it can be done manually, I think it would be a good idea to include this functionality by default.

Cheers!

sofian
Joomla! Apprentice
Joomla! Apprentice
Posts: 48
Joined: Tue Mar 31, 2015 6:34 pm

Re: improve the banners for small devices

Post by sofian » Fri Sep 11, 2015 7:11 pm

AlexVega wrote:Hi there!

Although it can be done manually, I think it would be a good idea to include this functionality by default.

Cheers!
can you please tell me how it can be done manually ?

note that it must use different images not one .

thanks

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2516
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: improve the banners for small devices

Post by AlexVega » Fri Sep 11, 2015 7:35 pm

Hi,

One of many solutions could be this:
-- Create a Custom HTML Module, ej. Banner - Top
-- In the Source Code add some HTML like this

Code: Select all

<article class="banner-top">
</article>
-- You can add a CSS Rule here, but I recommend add the CSS in your template css, something like this:

Image

Cheers!

sofian
Joomla! Apprentice
Joomla! Apprentice
Posts: 48
Joined: Tue Mar 31, 2015 6:34 pm

Re: improve the banners for small devices

Post by sofian » Fri Sep 11, 2015 7:59 pm

hi

yes , then i use media screen sizes in my css to display / hide the images .

perfect .

thank you very much

but i hope that i will see this options inside the component it self .

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2516
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: improve the banners for small devices

Post by AlexVega » Fri Sep 11, 2015 8:02 pm

You're Welcome,
Regards!

pduke24
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Thu Mar 05, 2015 12:07 am

Re: improve the banners for small devices

Post by pduke24 » Tue Sep 22, 2015 2:31 pm

AlexVega wrote:Hi,

One of many solutions could be this:
-- Create a Custom HTML Module, ej. Banner - Top
-- In the Source Code add some HTML like this

Code: Select all

<article class="banner-top">
</article>
-- You can add a CSS Rule here, but I recommend add the CSS in your template css, something like this:

Image

Cheers!
Ive tried testing this but the images vary when viewed in Safari and in Chrome. It looks better in Safari. Do you have a fix so it wont show up differently on Chrome?

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2516
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: improve the banners for small devices

Post by AlexVega » Tue Sep 22, 2015 9:58 pm

Hi there!

Please, Can you show us an url to see what is the difference? or you can tell us what is the main difference?

Cheers!

 

Locked

Return to “Joomla! Ideas Forum”