Joomla Templates Club 406,261 posts

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#202806

Using uber corporate and I added a basic customHtml module with only a line of words on it. Assigned under full-width/corporate-home position. The wordings are not scaled when I view under mobile / small view

How can I make it responsive like ACM GALLERY?

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#555676

Hi KMF,

I can see the text is fitted in small view >> http://prntscr.com/57ufon

Can you clarify what do you means with “scale”? You want the text become smaller in small view?

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#555751

Hi Eragon,

I’ve solved it already. Thanks

Edit : Actually not solved but I just give up having the scale idea.

But if you keen to give to try, have a look on the Corporate-Home, JACM > Gallery Style 1. Those words under Gallery Description will scale based on screen size. Not like the photo you attached where the font size of words still maintain.

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#555762

Hi KMF,

Yes. You can do that. Kindly follow these steps.

1. Add class for the text.
For example

<div class="resize_text">
This is a sample text
</div>

2. Define the font-size for different screens size

@media (max-width: 767px) {
.resize_text {font-size: 18px;}
}
@media (min-width: 768px) and (max-width: 991px) {
.resize_text {font-size: 18px;}
}
@media (min-width: 992px) and (max-width: 1279px) {
.resize_text {font-size: 24px;}
}
@media (min-width: 1280px){
.resize_text {font-size: 28px;}
}


1 user says Thank You to Eragon H for this useful post

1. Meng Fei Koo

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#555905

Thanks for reply.

What if the text have different size example h3 and h4 in same module. Possible to have resize by %?

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#555911

1. You can’t resize the text-size of whole module by %. You have to re-define each class (including h3 or h3 if have).

If you want to use % instead of pixel. You can use “em”. For more information, you can refer this: http://www.w3schools.com/css/css_font.asp

2. The h1,h2,h3,h4,h5 is pre-defined text style, which are used globally. It means that if you change the size, it will affect to the whole site, not the module only.

The solution is, instead of using pre-defined style like h1,h2,h3,h4,h5 you can create new classes for each type of text. Then you can define them as you need.
For example

a. Use pre-defined style

<h1> This is the title </h1>

b. Create new class

<div class="title-text">This is the title</div>

1 user says Thank You to Eragon H for this useful post

1. Meng Fei Koo

[Author]

Posts