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
-
AMP pages for a responsive Ecommerce website?
Howdy guys, I'm wondering if AMP is worthwhile intergrating into a responsive e-commerce site? I'm under the impression that the benefits of AMP would be focused around speed, however it may come at the cost of conversion rate if it was to be delivered for product pages, etc. I'm presuming that even if AMP was on every page across a responsive ecommerce site, Google would only display AMP pages in the carousel for news articles, such as on the integrated blog? Any advice would be awesome! Thanks guys 🙂
Intermediate & Advanced SEO | | JAR8970 -
Correct keywords Anchor text for links passing
Hi i have some old pages with more link equity, i m planning to key some bestseller in the main content.. my question is on best use of anchor text, can i use the below for eg: Product name is Chloride Exide Safepower Cs 7-12 12V Sealed Battery so i want to use the key word which is "12v 7ah Battery" in anchor text or buy 12v 7ah battery in Anchor text, will this google consider as spam?? Pls suggest
Intermediate & Advanced SEO | | Rahim1190 -
What is Google supposed to return when you submit an image URL into Fetch as Google? Is a few lines of readable text followed by lots of unreadable text normal?
I am seeing something like this (Is this normal?): HTTP/1.1 200 OK
Intermediate & Advanced SEO | | Autoboof
Server: nginx
Content-Type: image/jpeg
X-Content-Type-Options: nosniff
Last-Modified: Fri, 13 Nov 2015 15:23:04 GMT
Cache-Control: max-age=1209600
Expires: Fri, 27 Nov 2015 15:23:55 GMT
X-Request-ID: v-8dd8519e-8a1a-11e5-a595-12313d18b975
X-AH-Environment: prod
Content-Length: 25505
Accept-Ranges: bytes
Date: Fri, 13 Nov 2015 15:24:11 GMT
X-Varnish: 863978362 863966195
Age: 16
Via: 1.1 varnish
Connection: keep-alive
X-Cache: HIT
X-Cache-Hits: 1 ����•JFIF••••��;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 75
��C•••••••••• •
••
••••••••• $.' ",#(7),01444'9=82<.342��C• ••••
•2!!22222222222222222222222222222222222222222222222222��•••••v••"••••••��••••••••••••••••
•���•••••••••••••}•••••••!1A••Qa•"q•2���•#B��•R��$3br�
••••%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������•••••••••••••••••••
•���••••••••••••••w••••••!1••AQ•aq•"2�••B���� #3R�•br�0 -
Optimum Word Count for Home Page Text
We operate a commercial real estate web site (www.nyc-officespace-leader.com) in New York City. Our home page text is about 500 words. Currently the home page text is of a promotional nature and not very engaging. We are attempting to write a check list for companies that are seeking to lease commercial space and make the text very useful, practical and engaging. However we are having difficulty covering all the bases with less than 1,000 words. If the home page text has 1,000-1,300 words is that detrimental from an SEO point of view? On the plus side I would think this would allow us to include several secondary keyword terms and to add plurals and variations of the two or three top phrases. Any thoughts or suggestions? Thanks, Alan Rosinsky
Intermediate & Advanced SEO | | Kingalan10 -
ALT Tag Labels that Use Near Duplicate Text-SEO No, No???
Greetings Moz Community: About 280 pages of my 650 page commercial real estate website are listing pages. Each listing page contains between two and five photos, each with a corresponding ALT tag. My developer has set up the labeling of the ALT tags in the following manner. I can create a label for the first photo, but each subsequent photo automatically gets the same label plus a number tagged to the ALT. Like this: alt="Flatiron Loft for Rent"
Intermediate & Advanced SEO | | Kingalan1
alt="Flatiron Loft for Rent - Photo 0"
alt="Flatiron Loft for Rent - Photo 1"
alt="Flatiron Loft for Rent - Photo 2"
alt="Flatiron Loft for Rent - Photo 3" Is this method neutral, positive or negative for SEO? I am concerned that this manner of labeling ALT tags might risk triggering a duplicate content penalty. In early July I migrated the site from Drupal to Wordpress. We changed the URL structure (adding a sub-directory) for the listings at that time. Google is refusing to index about 100 listing pages. Any chance the ALT tags are contributing to Google's reluctance to index the URLs? I might also add that images are hosted on Amazon's CDN. A sample listing URL is http://www.nyc-officespace-leader.com/listings/278-21st-street-flatiron-loft-for-rent
Note: (/listings/278) were added to the URL in July, representing the listing sub directory plus the listing number. I Look forward to hearing the opinion of the MOZ community!!! THANKS!!!
Alan1 -
TLA / Text Link Ads
Hi folks, Curious to hear what people know about the TLA situation since reports surfaced that they'd been de-indexed. It looks like it's all been quiet since those early reports. Not many people admit to using TLA so perhaps you've heard something on the grapevine... nudge nudge wink wink.
Intermediate & Advanced SEO | | MattBarker0 -
Mobile Sitemap Best Practices w/ Responsive Design
I'm looking for insight into mobile sitemap best practices when building sites with responsive design. If a mobile site has the same urls as the desktop site the mobile sitemap would be very similar to the regular sitemap. Is a mobile sitemap necessary for sites that utilize responsive design? If so, is there a way to have a mobile sitemap that simply references the regular sitemap or is a new sitemap that has all urls tagged with the "" tag with each url required?
Intermediate & Advanced SEO | | AdamDorfman0 -
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