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 -
Best format for E-Commerce Pages in Title Text / Link Text & Markup
Hello Please comment on which you think is best SEO practice for each & any comments on link juice following through. Title text ( on Product Page ) <title>Brandname ProductName</title>
Intermediate & Advanced SEO | | s_EOgi_Bear
OR
<title>ProductName by Brandname</title> on category page <a <span="" class="html-attribute-name">itemprop="name" href="[producturl]">ProductName</a>
<a <span="" class="html-attribute-name">itemprop="brand" href="[brandurl]>BrandName</a> OR <a <span class="html-attribute-name">itemprop="name" href="[producturl]">BrandName ProductName
( Leave Brand Link Out)</a <span> Product Page <a itemprop="name" href="[producturl]">ProductName
<a itemprop="brand" href="[brandurl]>BrandName</a itemprop="brand" href="[brandurl]></a itemprop="name" href="[producturl]"> OR <a itemprop="name" href="[producturl]">BrandName ProductName
( Leave Brand Link Out)</a itemprop="name" href="[producturl]"> Thoughts?0 -
Effects of pages heavily reliant on CSS for text and image content
We have a new feature that's been live for a couple days here: http://www.imaging-resource.com/cameras/canon/t5/vs/canon/60d/ My concern is that the developer relied very heavily on css for content and image layout. Such that the meat of our pages looks pretty meager: https://gist.github.com/anonymous/b1ccb77914c6722d40bd Google does parse css, but I'm not sure if it does so for content, or just to verify the site isn't doing something nefarious. Will google see our deeper content in the css, or view the page as being very thin?
Intermediate & Advanced SEO | | ir-seo-account0 -
Two Pics, one bit of Text single anchor link?
Hi thereGurus, sorry Aspirants ;-), I have a really nice looking menu used in my standard page template that has some SEO issues now due to possibly causing 'too many onsite links' penalty/downgrade on some of my bigger pages going >120 links. Wanting to keep the nice menu, I want to work around the issues if possible. The menu is comprised of 7 buttons with various keywords pertinent to the site. On the menu, hovering over the keyword in a button eg 'Technology' causes this button with word inside to do an animated slide down and a picture representative of 'Technology' to appear where the button was with the original button directly below it, which then a side menu slides out of to the right to reveal 5 anchor links that represent the 'Technology' menu category. The first option in this sub-menu is supposed to have the same anchor link as the description image and the button/button text that being it is like a category description. Trouble I am having is that the slide out menu requires a separate div for javascript reasons. I have one anchor covering the button and the pop-up image, but then I need a second anchor for the first line of the slide out menu (otherwise fails W3C). This is adding 7 duplicate anchors to the page on a e-Commerce page that already has too many anchors IMHO. I read in HTML5 you can have an anchor holding a div inside, but how about an un'd div? The next four items on the slide out menu go to other anchor links so it first anchor needs to end prior to these, hence halfway through a div. Is there another way of making multiple items (across div boundaries etc) only go to/count as one single anchor link? Thanks for your help, Brad
Intermediate & Advanced SEO | | BM70 -
Can Google Read Text in Carousel
so what is the best practice for getting Google to be able to read text that populates via JQuery in a carousel. If the text is originally display none, is Google going to be able to crawl it? Are there any limits to what Google can crawl when it comes to JavaScript and text? Or is it always better just to hardcopy the text on the page source?
Intermediate & Advanced SEO | | imageworks-2612900 -
How to get around Google Removal tool not removing redirected and 404 pages? Or if you don't know the anchor text?
Hello! I can’t get squat for an answer in GWT forums. Should have brought this problem here first… The Google Removal Tool doesn't work when the original page you're trying to get recached redirects to another site. Google still reads the site as being okay, so there is no way for me to get the cache reset since I don't what text was previously on the page. For example: This: | http://0creditbalancetransfer.com/article375451_influencial_search_results_for_.htm | Redirects to this: http://abacusmortgageloans.com/GuaranteedPersonaLoanCKBK.htm?hop=duc01996 I don't even know what was on the first page. And when it redirects, I have no way of telling Google to recache the page. It's almost as if the site got deindexed, and they put in a redirect. Then there is crap like this: http://aniga.x90x.net/index.php?q=Recuperacion+Discos+Fujitsu+www.articulo.org/articulo/182/recuperacion_de_disco_duro_recuperar_datos_discos_duros_ii.html No links to my site are on there, yet Google's indexed links say that the page is linking to me. It isn't, but because I don't know HOW the page changed text-wise, I can't get the page recached. The tool also doesn't work when a page 404s. Google still reads the page as being active, but it isn't. What are my options? I literally have hundreds of such URLs. Thanks!
Intermediate & Advanced SEO | | SeanGodier0 -
Http Response on bulk list
Do you know any tool that can find the http response code for a bulk list of urls?
Intermediate & Advanced SEO | | Melia0 -
Internal Anchor Text - Partial or Exact Match Does It Matter?
When linking internally on an ecommerce site between pages and from a sitemap, is partial or exact match on the anchor text a significant factor? If it matters to Google, which is a better practice to use? I found plenty of info on external links, but precious little on internal links (which suggests it doesn't matter enough to worry about).
Intermediate & Advanced SEO | | AWCthreads0