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
-
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 -
Shall I hide short product review texts from customers (to avoid google panda/quality issues)?
About 30% of product reviews that the clients of our ecommerce store submitted in the last 10 years are 3 words or less (we did not require any minimum length). Would you recommend to hide those very short review texts? Where to draw the limit?
Intermediate & Advanced SEO | | lcourse
Numeric star rating would still go into our accumulated product rating. My only concern here is what impact it may have on google ranking.
To give some context, the site has for a long time some panda/phantom related issues where there are no obvious reasons that we could point to.0 -
One click links, followed ? anchor text ?
Hello, Just wondering google follows on clicks links (links create in a nice button) and anchor text. Thank you,
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 -
Mobile homepage title is showing unrelated text
Hi all, I've read the FAQs and searched the help center. My URL is: http://www.leibish.com/I just discover it today - when searching on mobile for the brand name (search for "Leibish") I find the following title: Reply (see the attached image).Also, when searching for site:leibish.com +reply you'll find at least a few dozens indexed pages with this title.I checked for the following:1. Link bombing - check with ahrefs and majestic - everything seemed fine.2. Alt tag or other hidden text - couldn't find anything. 3. DMOZ or Yahoo directory submissions with this anchor text - yet, nothing.Besides the fact that I must fix this issue I find it fascinating from the SEO perspective. I need the big guns in here - can you help my resolve this mystery? :-)Thanks...
Intermediate & Advanced SEO | | seoperad0 -
Anchor text is a url, but not the one I want?
I am currently getting links to my site where the anchor text is, say, domainx.com. However, my website's url is domainy.com - the anchor text is the url of another website. Is this hurting my website in the SERPS, or making my link building look unnatural? The link is on the blog roll of another website, so it has produced hundreds, maybe thousands of copies of this anchor text link. Does that have any impact on my ranking as well?
Intermediate & Advanced SEO | | redfishking0 -
What's the news on sitwide nofollow links and anchor text penalties
Is it possible to be penalized for sitewide nofollow links because of anchor text penalties, even if you use branded anchor text?
Intermediate & Advanced SEO | | BobGW0 -
Large scale change of incoming anchor text/alt tag image links
I provide SEO services in-house and for clients for a ecommerce and web design company. For every client site we create or host we provide a image link on the bottom linking back to our company website. I started researching competitors that offer same services for our industry that have top Google rankings for all the terms we are targeting and i just realized they rank that well because their image/anchor text link they place on client sites is alt tagged for that specific keyword. We have not been optimizing or utilizing this easy keyword backlink method. I am now wanting to go to all of our clients sites and change our backlinks to target the keyword we are optimizing for but my concern is will that number of incoming anchor text/image alt tag links cause us to get penalized from google for either over optimization or them seeing 100's of backlinks keyword specific just change overnight. What is the best way to go about this change in a safe way to avoid or risk penalty from Google? 99% of all of our client backlinks are in the footer so they show up on every single page and they are all images. Would it have a different affect if i add a alt tag to those images so that we get the oncoming link juice of that specific keyword? One of my concerns is over optimization, since some of our clients have 1000's of pages on their website. so that is 1000's of incoming exact match keyword links. I feel like the danger is low for being penalized but i would rather be safe then sorry and get additional feedback. Thanks, Stephen
Intermediate & Advanced SEO | | VITALBGS0