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
-
Probably basic, but how to use image Title and Alt Text - and confusing advice from Moz!
I've been doing SEO on my business's site for years and have got good results. I've always used image Titles and Alt Text text. Our blog posts are image-intensive, often with 100-200 pictures (not surprising since we're photographers). For any given blog post, I've tended to have a uniform image Title for each image and then a more specialised Alt Text tag giving a description. A typical image on one of our blog posts would be like this: Image filename: wedding-photography-at-so-and-so-venue-001.jpg .... 002, 003 etc Image Title Attribute: Wedding Photography at So-And-So-Venue by Our-Company-Name - this would be the same for every image in the blog post. Alternative Text: Bride and groom exchanging vows during wedding ceremony at so-and-so-venue - this would be tailed for each image. So my question is - is this right? The Moz help page for image SEO is actually incorrect in one aspect: https://mza.seotoolninja.com/ugc/10-tips-for-optimizing-your-images-for-search "Alt text (short for “alternative text”) is used to highlight the identity of an image when you hover over it with your mouse cursor. It also shows as text to all users when there are problems rendering the image." This is not the case. Hovering over the image in Firefox, Chrome, Edge and Opera ALL display the Image Title, NOT Alt Text. Thoughts?
Intermediate & Advanced SEO | | robandsarahgillespie0 -
Button and anchor text in
Hello, On my website I have button coded this way (it is automatic in my wordpress template) Can google pass PR and anchor text thru that or would a basic text link be better ?
Intermediate & Advanced SEO | | seoanalytics0 -
Using CSS to hide anchor text
Hi all, In my website, I would like to use CSS to set the anchor text to "website design service"(my company provides web design service) but show the button text as "website", due to some artistic reasons. Therefore, the anchor text for the link is "website design service" but what users see is "websites". Does this sound spammy to Google? Is it a risky move that might hurt my SEO? Looking for some advises here. Thank you very much. Best,
Intermediate & Advanced SEO | | Raymondlee0 -
What would be best way to transition from mobile website to responsive
We have a mobile website (mobile.website.com) that mirror our desktop site (www.website.com) with +100 000 pages. We have an alternate tag on our desktop to our mobile site and a user agent detect that redirect mobile traffic to our mobile site Our mobile site is no index and has a canonical to our desktop. Everything works pretty well, the mobile website is not index and only show up in SERP when a user make a search from a mobile. Our main website is now responsive and we would like to kill our mobile site without compromising our traffic. We know that a slight speed change or content change can affect our traffic, what would be the best way to do that? Big bang: redirect all mobile URL to desktop, remove user agent detect and remove alternate tag on desktop Semi Big bang: remove user agent detect and remove alternate tag on desktop and see how the traffic react before redirecting Progressive: remove the user agent detect and the alternate tag on some section of the website to see how the traffic react Other ? Anyone has any experience with that? Thanks and let me know if anything is not clear.
Intermediate & Advanced SEO | | Digitics0 -
I Need to put static text every page (600 words) need advice
i need to put static text (about our company brief 600 words) to all content section of pages of our website. I know it's bad for SEO Duplicate Content. But i need to tell google this is my static content and do NOT crawl it. Or something like that. canonical is for whole page but i need to set it up for certain positions of every page. is that possible?
Intermediate & Advanced SEO | | nopsts0 -
How fast to change non-branded anchor text
A client has most of his links from sitewide partnership links with non-branded anchor text. One we changed to nofollow and one partnership we're ending next month, but the rest he wants to change to branded anchor text There's 7 sitewides and a bunch more single links. Should we change the anchor text all at once or space it out to one major change per month?
Intermediate & Advanced SEO | | BobGW0 -
Is "Car Discount" a problematic anchor text for CarDiscount.com (google penguin)?
I have a couple of partial match domains in the format KEYOWRDdiscount.com and also the website name resembles domain name. "Car Discount" is not my website but just an example to illustrate:
Intermediate & Advanced SEO | | lcourse
Is "Car Discount" a problematic anchor text for CarDiscount.com?
Should I try to modify existing external anchor texts to "CarDiscount" or "CarDiscount.com" instead of "Car Discount" Do you know of any cases where such anchor texts coinciding with partial match domain were likely reason for penguin penalization? Thanks.0 -
Hiding Text in an SEO friendly way - is it possible?
Hello, I have a client who has very little (practically no) text content on his ecommerce website, on the home page and category / sub cat pages. We have drafted some text for him - but the designer has fought back against this as he feels it will break the design. Our proposed solution is to have some text visible - and the rest will be text that is hidden but can be revealed by clicking Read More. We are planning to follow these recommendations : http://www.shimonsandler.com/collapsible-div-seo-friendly/ We are not hiding text for the sake of it - but more to improve the UX. We of course want the text to be accessible - i.e. readable by screen readers. Does anyone have any experience or opinions in respect to taking this course of action, and is there anything we should make sure we either do or not do to stay on the side of the BIG G? Kind Regs, Rich
Intermediate & Advanced SEO | | RichBestSEO1