1

I have to write long info on 'Footer - Copyright' for only PC view

but I want to show short info for Mobile or Tablet view

How can I setup what 'Copyright' text show up only on Mobile or Tablet view?

  • you are using any css framwork for HTML & css – Keyul Shah Sep 18 '14 at 16:32
1

You can use media queries to display different data to different sized browsers.

First create the content by editing app/design/frontend/your_package/your_theme/template/page/html/footer.phtml

Here you will find the call to your copyright:

<address class="copyright"><?php echo $this->getCopyright() ?></address>

You want to create a second version of this for your tablet/mobile users like this:

<address class="mobile-copyright"><?php echo $this->getCopyright() ?></address>

So that the result is:

<address class="mobile-copyright"><?php echo $this->getCopyright() ?></address>
<address class="copyright"><?php echo $this->getCopyright() ?></address>

Then in one of your stylesheets (css files) you can add in a default display and a media query to switch the display of the two turning one on and the other off for display. The point where you switch is up to you but for example I'll use 771px width which is a popular breakpoint in Magento 1.9. Assuming a mobile first approach you want to hide the desktop version by default and then switch them for users with a wider screen than 771px.

.mobile-copyright { display:block; } //displays the mobile copyright
.copyright { display:none; } //hides the desktop copyright


@media only screen and (min-width: 771px) {
    .mobile-copyright { display:none; } //hides the mobile copyright
    .copyright { display:block; } //displays the desktop copyright
}

Technically a user could be on a desktop and simply make their browser smaller, which would be uncommon but is possible, and therefore see the tablet/mobile version. The only way you could get around this would be using a feature detection script such as http://modernizr.com/

1

The easiest way is you use the Mobile Detect changing the following file: app/design/frontend/base/default/template/page/html/footer.phtml On the line:

getCopyright() ?>

Or if you have an advanced knowledge, you can create a module rewriting method:

public function getCopyright()
    {
        if (!$this->_copyright) {
            $this->_copyright = Mage::getStoreConfig('design/footer/copyright');
        }

        return $this->_copyright;
    } 

File:

app/code/core/Mage/Page/Block/Html/Footer.php

In this method you do the necessary validations and its system.xml you create another field to change the texts copyright by management.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.