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
-
Alternative text vs Image title attribute
Hi there. Anyone know how important Image title attribute is ? Moz is bringing it up saying make sure my images are all title attributed as well as alternative texted but no wedding photographers mention it in SEO posts or blogs. Click on wedding photographers blogs and most don't seem to have it (Image title attribute) either but I don't want to miss anything out that I need to be doing as I am building a new site and if it needs to be done now I have the time to do it. Any advice is appreciated thank you people x
Intermediate & Advanced SEO | | Howelljones0 -
Can we compete for both videos and text results?
Hi, We have a ecommerce website that performs very well for our brand pages on the text results including the reviews snippet. Our brand pages also include embedded videos. Until now we have always ranked poorly on video results. Our videos are hosted over youtube. In order to boost our video result we have recently submitted a video sitemap to help crawlers find out our videos. The result is the following : our brand pages are now only competing in the video results space. Instead of showing as a text result with our reviews snippet, it shows as a video in a carrousel widget. Within the video tab we are ranking top. We have experienced a drop in CTR since then. Moz have reported a drop on all our brand keywords for text search although the video widget shows our brand there. Is there a way to compete for both videos results and text results, making the choice to keey the review snippet widget? Is the video sitemap useful only to compete within the video space? Cheers
Intermediate & Advanced SEO | | mattam1 -
My page ranking dropped after I made it responsive
Recently, I made one of my site page responsive. It was ranking on 13th Position and after I made the page responsive, it dropped to 24 desktop and 35 on mobile rankings. I ran mobile friendly test and it said "awesome, your page is mobile friendly". Not sure, what went wrong here. Page in question is: https://www.itcontractorsuk.com/ Can someone please advice? Please Note: My site is partially responsive.
Intermediate & Advanced SEO | | ThinkWebUK0 -
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 -
Panda 4.0 Update Affected Site - What should be a the minimum Code to Text Ratio we should aim for ?
Hi All, My eCommerce site got hit badly with the Panda 4.0 update so we have been doing some site auditing and analysis identifying issues which need addressing. We have thin/duplicate issues which I am quite sure was part of the reason we were affected by this even though we use rel=next and rel=prev along with having a separate view all page although we don't concanical tag to this page as I dont' think users would benefit from seeing to many items on one page. This led me to look at our Code to Content Ratio. We have now managed to increase it from 9% to approx 18-22% on popular pages by getting rid of unnecessary code etc. My question is , is there an ideal percentage the code to content ratio should be ?.. and what should I be aiming for ? Also any other Panda 4.0 advice would also be appreciated thanks Sarah
Intermediate & Advanced SEO | | SarahCollins0 -
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 -
Best way to set up anchor text on parked pages?
Our company is no longer offering a series of products, much to the disappointment of our SEO team since we've spent a long time building up the pages and getting them ranked organically. The pages all have decent page rank and in some cases rank #1 for the primary keyword. We have a sister company that we acquired a year ago and they still offer these products on their website. They are a completely separate company with their own website which existed long before we acquired them and we have nothing to do with their website. Our team has proposed that rather than take down the URLs on our site for the products we no longer offer, to put a message saying something like "sorry we don't offer this anymore but you may be interested in this.." and then link to our sister company with anchor text so that they can get some benefit from our SEO efforts if we can't. The question/issue is how should we do that since there will be a lot of pages from the same domain, about 20 pages, all linking to a few pages on a different domain. Should the anchor text be varied unbranded or branded? On the one hand I think if we change up the anchor text used to link to another page many times from a single domain that looks strange and transparent to google. On the other hand unbranded text would be the better descriptor for users since we are deep linking to the product not the homepage of the other site.
Intermediate & Advanced SEO | | edu-SEO0 -
Anchor Text Diversification – Branded VS Non Branded – What is the best approach… if any?
Our organization competes in the Drug & Alcohol Treatment Category… very competitively I must say. While we create content for long-tail keywords, we focus on linking (blogging + Press Release + Acquisition, etc…) as the main strategy to increase relevancy for 4 major keywords. (Alcohol Rehab, Drug Rehab, Alcohol Treatment, and Drug Treatment)… all these terms have their respective landing pages, and we try to provide a good flow of new links coming to these pages on a weekly basis… Lately we have been acquiring more links than we anticipated… not a bad thing since they are from reputable websites… however I am a bit concern regarding the Anchor Text distribution of these links. Example Let’s say I get 100 links to my ‘Alcohol Rehab’ page – what is an appropriate percentage for the anchor text distribution? For example: Branded Links 20 - Keyword: St Jude Retreats
Intermediate & Advanced SEO | | dhidalgo1
Exact Match Links 70 - Keyword: Alcohol Rehab
Broad Links 10 - Keyword: Rehab Is this an ok distribution, or should I change things around? Hope you guys can help! Thanks!!!!0