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.
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
-
Ranking without use of keywords on page & without use of matching anchor text??
Howdy folks. So, here is a dilemma. One of competitors of ours is somehow ranking for a keyphrase "houston chronicle obituaries" without any usage of these keywords on the page, without any full or partial anchor text match ("chronicle" is not used anywhere). The rest of competitiors' rankings make sense. Any ideas?
Intermediate & Advanced SEO | | DmitriiK0 -
Does changing Anchor text of old built links raise a red flag in Google?
I have lot of links (10000+) built against Exact match anchor text so what is solution to that now? Other than disavowing them all, May I change the anchor text of those links (From Exact Match To Brand Name or naked URL)? Does Google have algorithms to detect anchor text changes and if so, do those algorithms detect these sorts of changes and raise a red flag on sites doing it. I respect your opinions but please only comment if you are sure about it because I am already facing a penalty so can't afford to get another.
Intermediate & Advanced SEO | | Ishrat-Khan1 -
Internal anchor text
Hi, I'm not sure what approach I should be using with my internal anchor text. Ideally I would like to rank well for about 3 keyword variations, so what I am wondering is is this achievable through judicious use of onsite anchor text? What I'm trying to establish is whether I should focus on just one term throughout and never vary? Or, should I go for a variety of all 3 keywords? Should I go for a wide variety of semantically similar phrases. Where are the most important places for this anchor text?
Intermediate & Advanced SEO | | Cornwall
E.g. home page, main nav, text links within articles? Should I try and use the full term in my navigation. E.g. instead of using
Pink | Blue | Green
should I go for
Pink widgets | Blue widgets | Green widgets Any suggestions, pointers to useful articles would be very much appreciated. TIA,
Chris0 -
Anchor Text Usage
Hi, What is the best way to use anchor text during link building after recent updates from Google. I thinking of doing the following: 60% Brand Keyword (my site name)
Intermediate & Advanced SEO | | Vegitss
20% Click here, visit this site etc
20% myurl.com
10% a Mix of both broad & phrase match of my targetted keyword. What do you suggest Does anyone have a working strategy? Will be waiting for your replies...0 -
Anchor text questions - What are your thoughts?
Hi, I want to talk about anchor text and the effect it has on search engines (Good & Bad). Here is a fictitious example we can talk about: www.supercoolrunningsneakers.com Title Tag: Running Sneakers - The Super Trendy Running Trainers Keywords targeted: Running Sneakers, Running Trainers How would you vary your anchor text to target these terms? If you had 50 unique articles to play with how would you vary the anchor text using the articles? Would you push 25 articles at 'Running Sneakers' and the other 25 at 'Running Trainers' or would you link some articles using the domain name anchor text? Q: I'm guessing running 50 articles using anchor text 'Running Sneakers' would benefit the SERP's moe for that term then mixing it up with say 'Running Sneakers', 'Running Trainers' & 'Domain Name Links'. Cheers
Intermediate & Advanced SEO | | activitysuper0 -
Any advice on acquiring "jump to" via anchor link text?
Google says these types of references are generated algorithmically and that users should include a table of contents & descriptive anchor link text. Is there anything else we should take into consideration? Also, does anyone know how this works with pagination? Due to the design of our site, we can't make one really long article, but would need to divide it up into several 'pages'--even though it would all live on one URL (we'd use the # for pagination). Thank you in advance for your feedback.
Intermediate & Advanced SEO | | nicole.healthline1 -
Link anchor text: only useful for pages linked to directly or distributed across site?
As a SEO I understand that link anchor text for the focus keyword on the page linked to is very important, but I have a question which I can not find the answer to in any books or blogs, namely: does inbound anchor text 'carry over' to other pages in your site, like linkjuice? For instance, if I have a homepage focusing on keyword X and a subpage (with internal links to it) focusing on keyword Y. Does is then help to link to the homepage with keyword Y anchor texts? Will this keyword thematically 'flow through' the internal link structure and help the subpage's ranking? In a broader sense: will a diverse link anchor text profile to your homepage help all other pages in your domain rank thematically? Or is link anchor text just useful for the direct page that is linked to? All views and experiences are welcome! Kind regards, Joost van Vught
Intermediate & Advanced SEO | | JoostvanVught0 -
Would using display:none; to hide a section of text effect SEO negatively?
I have seen several sites that put a div feature at the bottom of a page to hide content. If you click on the button, it will extend the page down and be loaded with paragraphs of text rich with keywords. Does anyone know is this is viewed as a negative with Google?
Intermediate & Advanced SEO | | netmkting0