Responsive text?

[HABITATSOFT]

Hello guys, thats in advance for any advice that you can give me, i have a issue about the responsive content.

The content (product title) that fits on 1024px screen, but doesn't fit at 768 / 600 so I want to know if is possible to show a small (modify) version of that title with doing a cloaking o similar

Ex:
Title at 1024:
Brand New Xbox One 500 GB Black Console

Title at 768 / 600px
Xbox One 500 GB Black Console

Any advice?

Thanks!

[HABITATSOFT]

Thanks!

[GregB123]

It can be done in a many ways. With Bootstrap it could be done these ways:

Long detailed Title with many words

Short Title with few words

or

Long detailed Title with many words
     Short Title with few words

Or if you are coding it yourself, then create similar class names and in your CSS file define at what screen widths they are declared   visibilty:visible; or  visibility:hidden;    - This is not cloaking, there is always a version of the text visible to the user.

[HABITATSOFT]

I know, but i´m talking about changing the the phrase, not the size,

[GregB123]

Hi Rafael,

In a responsive design you can definitely change any font size you want for different device widths, even h1 text.

You just give the h1 a class, or put it in a div with a unique class. Then in the CSS file you can use media queries to change anything like this...   font-size:12px; line-height:16px; color:red;

I do it often to put my h1, h2, h3 tags anywhere I want on the page and make them any size or style I want without messing up the look of the page.

[HABITATSOFT]

complete site to responsive, I saw your site but H1 don´t change only resize the divs.

Thanks for the answer

[ThompsonPaul]

Nice job covering both approaches, Gregory! I found this helpful as well.

[GregB123]

Are you converting a site to responsive, or just trying to hack a few things on a fixed with site?

If you are really making the page responsive, then I suggest using one of the pre-designed responsive site systems. I use Twitter Bootstrap. It's free and very easy to learn, even for a non-programmer. With Bootstrap your problem would be solved either by using a single title and changing the font-size for different device widths, or by presenting different versions of the title on different device widths. Like this...

Brand New Xbox One 500 GB Black Console

Xbox One 500 GB Black Console

In Bootstrap the class "hidden-desktop" actually means it is only visible on devices that are NOT desktops - which are tablets and phones. They tell you which screen width ranges are considered to be which device type. You can go to my site on a PC and pull the screen width across from wide to narrow to see how a Bootstrap site reacts to varying screen widths.

If you are just trying to hack a few repairs, you will need to do it in the CSS file with "media queries". Not too hard, but takes a little learning and experimentation to figure out. Your page HTML will need to have a "class" or "id" added to any element you want to adjust with the CSS.