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
-
For responsive site what should be lowest Screen Resolution for Desktop?
Hello Guys, Can you please share in details screen resolution I have to define for my responsive site for desktop, tablet & mobile. Your inputs are very valuable to me. Thanks! Micey
Intermediate & Advanced SEO | | micey0 -
Should you bother disallowing low quality links with brand/non-commercial anchor text?
Hi Guys, Doing a link audit and have come across lots of low quality web directories pointing to the website. Most of the anchor text of these directories are the websites URL and not comercial/keyword focused anchor text. So if thats the case should we even bother doing a link removal request via google webmaster tools for these links, as the anchor text is non-commercial? Cheers.
Intermediate & Advanced SEO | | spyaccounts140 -
SEO Concerns From Moving Mobile M Dot site to Responsive Version?
I currently have my mobile site set up as a m dot site. I have designed a new responsive/adaptive version of my desktop site I would like to start using. When I search from google on mobile, my website is indexed as the m dot site. When I make the switch, this will no longer be the case as I will only have one url for both mobile and desktop. The m dot url's will no longer work. Are there any SEO consequences from making this shift?
Intermediate & Advanced SEO | | mikeylong70 -
Anchor Text Usage
Hi, I have used anchor text more heavily. I built over 80 links so far, all are quality links like press releases & social bookmarks. I used to be ranking on #7 page for my keywords, then all of sudden i am not even on 50th page. Is this is because of Anchor text usage? Now should i remove those links or dilute my anchor texts by getting more links with different anchor texts. This is because the keyword i am targetting is pretty tough. So i think 80 links is not good enough. Let me know your thoughts. Here is the screenshot of the links i got so far which i think valuable. And the rest are social bookmarks. http://screencast.com/t/TJiDOanxnfZ
Intermediate & Advanced SEO | | Vegitt0 -
Making anchor text look more natural
Hi there, I have recently been approached by a company looking to do some SEO work for them, having had a look at their link profile, they had being using a lot of exact match anchor and have seen a drop in the rankings, no surprise there. I was thinking of asking the website where they have placed these links and changing them, so there is a mixture of exact, phrase, brand etc, what do you think? would this be best practice? or just leave these as they are and start building fresh links? Kind Regards
Intermediate & Advanced SEO | | Paul780 -
Anchor text
my website hit by penguin update on april; i check my anchor text and found that i had 1790 anchor links for " air conditioning nyc" i erase them almost a month ago but it still shows on the website report. how long it take seomoz see the changes and what about google. if someone have any idea how can i bring my site back to the top pages. thank you
Intermediate & Advanced SEO | | eoberlender0 -
Link Anchor Text
As I keep studing SEO I reach to the conclusion that the Anchor Text from other site is crucial to get more positive results for our website and for the link-building strategy. My question is - Is it better to have an Anchor Text to my main link our should I ask for a determine targeted keyword? Tks in advance! Pedro M Pereira
Intermediate & Advanced SEO | | PedroM0 -
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