Responsive text?
-
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 ConsoleTitle at 768 / 600px
Xbox One 500 GB Black ConsoleAny advice?
Thanks!
-
Thanks!
-
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 wordsOr 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.
-
I know, but i´m talking about changing the the phrase, not the size,
-
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.
-
complete site to responsive, I saw your site but H1 don´t change only resize the divs.
Thanks for the answer
-
Nice job covering both approaches, Gregory! I found this helpful as well.
-
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.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Anchor Text vs. Button Links
Hi How important are anchor text links within your own site vs. buttons for SEO? We've redesigned some of our pages from anchor text links to buttons which are just clickable images.I know historically this isn't the best way, but is it still as important as it used to be?
Intermediate & Advanced SEO | | BeckyKey0 -
My page ranking dropped after I made it responsive
Recently, I made one of my site page responsive. It was ranking on 13th Position and after I made the page responsive, it dropped to 24 desktop and 35 on mobile rankings. I ran mobile friendly test and it said "awesome, your page is mobile friendly". Not sure, what went wrong here. Page in question is: https://www.itcontractorsuk.com/ Can someone please advice? Please Note: My site is partially responsive.
Intermediate & Advanced SEO | | ThinkWebUK0 -
Correct keywords Anchor text for links passing
Hi i have some old pages with more link equity, i m planning to key some bestseller in the main content.. my question is on best use of anchor text, can i use the below for eg: Product name is Chloride Exide Safepower Cs 7-12 12V Sealed Battery so i want to use the key word which is "12v 7ah Battery" in anchor text or buy 12v 7ah battery in Anchor text, will this google consider as spam?? Pls suggest
Intermediate & Advanced SEO | | Rahim1190 -
Is my text readable? I don't see it in the page source
Text on my site seems to be readable in a text only version (the page is not cached so I viewed it by disabling JAVA and then copy and pasted the page into Word) However, when I look in the page source I don't see the text there. The text was created using Open X html boxes to help us with formatting, but is this causing an SEO problem?
Intermediate & Advanced SEO | | theLotter0 -
Hidden text that's not show in default view, does it hurt my on page optimization?
Hello, I am developing our new site that will create tabs such as "design", "tech specs", "customer ratings" etc. just like http://www.dell.com/us/p/inspiron-15z-5523/pd. My question is, if most of my content is on the 2nd and 3rd tabs, would my content effect my overall SEO if it's not on it's default view? Because, if users don't physically click on the 2nd and 3rd tab, does it mean that since there is no impression of that content, that content will be allocated to half of its SEO juice? Let me know, I would love to know! Shawn
Intermediate & Advanced SEO | | Shawn1241 -
Can Google Read Text in Carousel
so what is the best practice for getting Google to be able to read text that populates via JQuery in a carousel. If the text is originally display none, is Google going to be able to crawl it? Are there any limits to what Google can crawl when it comes to JavaScript and text? Or is it always better just to hardcopy the text on the page source?
Intermediate & Advanced SEO | | imageworks-2612900 -
Hosting / Redesign & Text Change
In the process of redesigning a clients site. The text and the design need to change to focus the site on conversions more than it is at present. The client is not happy with the current host, they want to change, my feeling is to either change a while before the site redesign is launched or a while after. Anyone got any opinions, experiences to share. Justin
Intermediate & Advanced SEO | | GrouchyKids0 -
What is the average response time for Reconsideration request
I know that Google states 'several' weeks but just wondering if anybody has any experience with a Reconsideration request and if they got any type of reply and what their general experience was. thanks
Intermediate & Advanced SEO | | BelfastSEO0