Can you replace an Image with Text on small screens

[Bikerdave]

Hi

I have an interesting problem.

My client wants images with text and I have created png images which include the text. This is ok except on small screens when the text is too small to read.

I cant seen to find any ideas of how to replace an image with text at small screen sizes or is there a better way?

Any help would be appreciated.

Thanks

David

[Webdongle]

Use modules for images that have text and for text only. You can set the modules to display only on computers or just mobiles etc. Module class suffix
hidden-phone or hidden-desktop or logo-top-tablet or any combination. Don't forget a leading space.

[HZolfaghar]

Hi

I have an interesting problem.

My client wants images with text and I have created png images which include the text. This is ok except on small screens when the text is too small to read.

I cant seen to find any ideas of how to replace an image with text at small screen sizes or is there a better way?

Any help would be appreciated.

Thanks

David

HI Bikerdave

Your customer's request is not logical.
1- You can change the size of the text on different screen sizes through Css and in any size of the screen, choose the right size for your text. This can be done with CSS.
2- But your own solution, the replacement of the text with the image, can also be done through the CSS. But this is not the right way for your problem.

Choose one of the two to give you the solution.

Hzolfaghar

[JTema]

Hi

I have an interesting problem.

My client wants images with text and I have created png images which include the text. This is ok except on small screens when the text is too small to read.

I cant seen to find any ideas of how to replace an image with text at small screen sizes or is there a better way?

Any help would be appreciated.

Thanks

David

An other suggestion:
create 2 different content for example content for mobile and content for desktop content for mobile may be under desktop content. Create 2 different divs for each. Eg. for The Desktop content it may be hidden-phone div. The mobile content can be just text without images. Then go to css and use media queries to show and hide each content for mobile and desktops.I assume that you know media queries.
this is an example

Code: Select all

@media (max-width: 480px) {
div.hidden-phone{display:none;	}
}
@media (max-width: 768px) {
	div.hidden-phone{display:none;	}
}

[Webdongle]

.
An other suggestion:
create 2 different content for example content for mobile and content for desktop content for mobile may be under desktop content. Create 2 different divs for each. Eg. for The Desktop content it may be hidden-phone div. The mobile content can be just text without images. Then go to css and use media queries to show and hide each content for mobile and desktops.I assume that you know media queries.
this is an example

Code: Select all

@media (max-width: 480px) {
div.hidden-phone{display:none;	}
}
@media (max-width: 768px) {
	div.hidden-phone{display:none;	}
}

That is not another option that is the option previously presented. But you have made two mistakes
First you don't need two divs (or module positions)
You don't need to add the css because hidden-phone etc. is in bootstrap and already in Joomla.