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
-
Text over image
Hello, I am creating an overlay on a image. Is it ok to write on this overlay in html or it is better to have the text not on a image for google and other search engines ? Thank you,
Intermediate & Advanced SEO | | seoanalytics0 -
Anyways to pull anchor text?
Hi guys, So basically i have a list of URLs/Domains and there backlinks (example: http://s29.postimg.org/ujxm0c4lj/screenshot_677.jpg) but i'm missing anchor text. Can anyone recommend any tools which can scan a backlink, locate the URL/Domain on the page and then pull the anchor text? Cheers, Chris <colgroup><col width="548"><col width="884"></colgroup>
Intermediate & Advanced SEO | | jayoliverwright
| | |1 -
How fast to change keyword rich anchor text
Hello, A client of mine has a site with almost all keyword rich anchor text, The problem is on on a bunch of little blogs and some (mostly sitewide) paid links. We are working to move into 100% white hat SEO, but we're doing it slowly. My question is, how fast can we change the anchor text on all of these links? I'm worried that if I do it too fast that it will be a red flag. Thanks.
Intermediate & Advanced SEO | | BobGW0 -
Two Pics, one bit of Text single anchor link?
Hi thereGurus, sorry Aspirants ;-), I have a really nice looking menu used in my standard page template that has some SEO issues now due to possibly causing 'too many onsite links' penalty/downgrade on some of my bigger pages going >120 links. Wanting to keep the nice menu, I want to work around the issues if possible. The menu is comprised of 7 buttons with various keywords pertinent to the site. On the menu, hovering over the keyword in a button eg 'Technology' causes this button with word inside to do an animated slide down and a picture representative of 'Technology' to appear where the button was with the original button directly below it, which then a side menu slides out of to the right to reveal 5 anchor links that represent the 'Technology' menu category. The first option in this sub-menu is supposed to have the same anchor link as the description image and the button/button text that being it is like a category description. Trouble I am having is that the slide out menu requires a separate div for javascript reasons. I have one anchor covering the button and the pop-up image, but then I need a second anchor for the first line of the slide out menu (otherwise fails W3C). This is adding 7 duplicate anchors to the page on a e-Commerce page that already has too many anchors IMHO. I read in HTML5 you can have an anchor holding a div inside, but how about an un'd div? The next four items on the slide out menu go to other anchor links so it first anchor needs to end prior to these, hence halfway through a div. Is there another way of making multiple items (across div boundaries etc) only go to/count as one single anchor link? Thanks for your help, Brad
Intermediate & Advanced SEO | | BM70 -
What is the meaning of anchor text penalty?
If i have 70% back links with same anchor text, will i get penalized? some of my blog's pages which were previously in top 100 in google are no where now. but for other long tail keywords, m still in same position. How to get rid of this penalty? Should i create more links with different anchor text to reduce the effect or should i remove that 70% back links?
Intermediate & Advanced SEO | | web2smspk0 -
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 -
Questions about Vittana.org's blogging contest and having bloggers use specific anchor text.
Hi All, Kenji Crosland here. I just joined vittana.org (yesterday!) to do some of the blogger outreach and content creation/link building. Although most of the links we've gotten in the past are branded links, we've decided to actively pursue anchor text links with specific keywords. If you check, you'll see that vittana has a relatively high domain authority. At the beginning of next week we'll be conducting a blogging contest with A-list celebrity tech bloggers. I don't think we'll have time to contact influencers in other areas for this contest unfortunately. When these A-list bloggers write their posts, we want them to have a link to this page: http://www.vittana.org/students To me, this seems a great opportunity to win on certain keywords we've discovered that should be easy to win and yet have a high volume of monthly searches. These are 5 word plus keywords that have over 300,000 searches per month. The students page, however, isn't optimized for those keywords. In the long run we want to win for the more difficult keyword "literacy". The word "literacy" is what we think will be a part of our new tagline: "Literacy is not enough". Because of time constraints, we won't be able to create landing pages to win for those "low hanging fruit" keywords in time for the blog contest. My question is: to what extent should we optimize the http://www.vittana.org/students page for the five word plus low hanging fruit keywords that we've discovered. I imagine if the content isn't relevant our clickthrough rates will suffer even if we do win for it (Altering our meta description is a possibility here) . Should we just try for the difficult keyword from the get go and come up with other ways to win for the low hanging fruit keywords? I'd love to hear your thoughts on this.
Intermediate & Advanced SEO | | vittana_seo0 -
Hidden Text? Part of the game or a major faux pas?
Hey all... I've been doing some competitive analysis lately on different niches in different cities, and upon looking at source code have noticed MANY sites(typically 2-3 of the top listed sites in each niche) who have hidden text, blocked by a box/logo, colored the same as the background, or both. Is this a typical practice? My understanding is Google seriously frowns on this, so is it worth reporting competitors who are doing such things? I don't see any grey areas in this matter and think it's a serious violation, but here these sites are at the top.
Intermediate & Advanced SEO | | dignan990