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
-
Suspected hacking - Google has detected that some of your pages may contain hidden text or cloaking
I got below message from google, But I did not see any hidden text, Please check it. http://www.astrologerravisharma.com/: Suspected hacking Google has detected that some of your pages may contain hidden text or cloaking, techniques that are outside our Webmaster Guidelines. Specifically, we detected that your site may have been modified by a third party. Typically, the offending party gains access to an insecure directory that has open permissions. Many times, they will upload files or modify existing ones, which then show up as spam in our index. Sample URLs: http://www.astrologerravisharma.com/ http://www.astrologerravisharma.com/about-us/ http://www.astrologerravisharma.com/achievements/ Recommended action Clean up the hacked content so that your site meets Google's Webmaster Guidelines.
Intermediate & Advanced SEO | | bondhoward0 -
Role of Home Page Text
My company operates a commercial real estate web site in New York City. We are competing against brands that can spend hundreds of thousands of dollars per year on marketing and SEO. I am an independent without employees. I am trying to replace generic home page text (my web site is ww.nyc-officespace-leader.com) with more engaging language that will differentiate the site. In terms of SEO best practices, what constraints exist on home page text? Must it discuss the brand in a general way? Must it specifically describe the interior pages of a site? For new home page text, I wanted to take a practical approach and provide visitors with a checklist that would be useful for their search. The check list would be in the form 500-800 words or very practical advice, specific items they should be aware of before commencing a real estate search. No other site is taking this approach and it could save tenants time and grief. I am attaching a very rough mock up of the new text (forgive the grammar, really needs to be edited!). Is there any thing wrong with this approach? I may have stumbled on a good idea, however maybe nobody has taken this route because it is inappropriate for a home page. I would very much appreciate any comments or guidance anyone may have. Best, Alan Rosinsky 0d76Iv2
Intermediate & Advanced SEO | | Kingalan10 -
Varying Internal Link Anchor Text with Each New Page Load
I'm asking for people's opinions on varying internal anchor text. Before you jump in and say, "Oh yes, varying your anchor text is always a good idea", let me explain. I'm not talking about varying anchor text on different links scattered throughout a site. We all know that is a wise thing to do for a variety of reasons that have been covered in many places. What I'm talking about is including semi-useful links below the fold and then varying the anchor text with each page load. Each time Googlebot crawls a page, it sees different anchor text for each link. That way, Googlebot is seeing, for example, 'san diego bars', 'taverns in san diego', 'san diego clubs', and 'pubs in san diego' all pointing to a San Diego bar/tavern/club/pub page. I'm wondering if there is value in this approach. Will it help a site rank well for multiple search queries? Could it potentially be better than static anchor text as it may help Google better understand the targeted page? Is it a good way to protect a large site with a huge number of internal links from Penguin? To summarize, we're talking about the impact of varying the anchor text on a single page with each page load as opposed to varying the anchor text on different pages. Thoughts?
Intermediate & Advanced SEO | | RyanOD0 -
112 exact match anchor text internal links in the sidebar
Hello, My website has 112 internal exact match sidebar links for my targeted keyword. I rank nr.5 for this keyword in Google and i was wondering if i should remove those links or not? I know that footer link are no no but i am not sure about sidebar links. Any ideas? Regards, InigoOÜ
Intermediate & Advanced SEO | | InigoOU0 -
How Can Google tell, if a anchor text is exact match
So, I was thinking to myself today. Couldn't Google say everything is an exact match anchor text in reality? Such as, Hyundai in Boston, Or cars in boston? I'm just concerned, that's all. Thanks for your help.
Intermediate & Advanced SEO | | PeterRota0 -
Diversifying anchor text question
Hi, I've seen a new article by Dr. Pete on diversifying links for 2013 (http://www.seomoz.org/blog/top-1-seo-tips-for-2013), now my question is this: Dr. Pete talks about mixing up the anchor text for links, is so we don't get caught out by Google or actually mixing it has a better impact? For example: 1. 20 anchor text links targeting just the target term. 2. 20 anchor text links targeting 4 variations of the target term. Is number 2 recommended so things look natural or does it actually have a better impact on SEO. Thanks
Intermediate & Advanced SEO | | activitysuper0 -
Company name often shows in anchor text (important keyword phrase within), can this impact ranking?
Hi everyone, My company is called "Hawaii Job Engine" - www.hawaiijobengine.com - and many sites that link to my site use my company name as anchor text "Hawaii Job Engine". I have heard Google may devalue a certain keyword phrase if used too often in anchor text. Does this mean I may, over time, get a poor ranking for the term "Hawaii Job" since that phrase is part of my company's name. Or, will search engines easily notice it is my company name and therefore it will not have a negative impact on rankings? Example: if the anchor text leading to my company's homepage is company's name 95% of the time (on authoritative sites) could this be an issue? I don't know the %, but just to establish if there may be in % levels to keep in mind. thank you, Kristian
Intermediate & Advanced SEO | | knielsen1 -
Http Response on bulk list
Do you know any tool that can find the http response code for a bulk list of urls?
Intermediate & Advanced SEO | | Melia0