Home>Support>Customize page for mobile devices

Customize page for mobile devices

Currently I’ve a webpage set up with the meta slider, then a row with 5 circle icons.

The middle icon is the most important one and is placed in the middle for that reason.

However on mobile devices this icon gets placed down below (in the middle) and I wanted this icon to be at the top on mobile.

In conclusion, I want to have my homepage with 5 circle icons. For desktop mode it’d display it with my important icon in the middle.

But on mobile phones it would display that same icon at the top.

Is it possible?

Thanks

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 10 months ago Mhspb

    Is it possible to edit the homepage only for the mobile?

  2. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Mhspb

    Thanks for running Vantage.

    The theme is responsive, meaning elements adapt for smaller screens, there isn’t however a different set of content for mobile. The same content is always rendered. Horizontally aligned elements will vertically stack below a certain point. The order in which they stack is the natural document flow order. Left to right changes to top to bottom. It’s unfortunately not possible to change this ordering without also changing it for desktop.

    Sorry I don’t have more here.

  3. 9 years, 10 months ago Mhspb

    Thanks Andrew,

    i’m currently having another issue.

    The site I’m making I’m inserting a table through iframe, when I try to navigate on the page on a mobile it only shows half the table… i was wondering if I can disable mobile mode for only 1 page, not all…

  4. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure, thanks for your understanding. On the Circle Icon challenge I’d suggest thinking of another solution that works for both desktop and mobile, like perhaps a Call to Action widget somewhere on the page.

    I can try assist with small CSS modifications, like hiding the table on mobile for example. The viewport is however set before the page body class is declared so it would take a little custom development and some conditional PHP to declare a different viewport for one page.

    (If at any point you’d like to check out a quote for developer assistance on more advanced requests, we recommend https://codeable.io/)

  5. 9 years, 10 months ago Mhspb

    The page is http://www.cashnowexchange.ca/currency-exchange/

    on mobile the table is hidden and the rates do not display.

    Would you be able to assist me with that?

  6. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Running iOS 8.1 in Chrome I can see the table, I just need to scroll to see all the content.

    I’m pretty stumped on how to fix this. I tried for a while now to reduce the font size of the table. The problem is that the iFrame is loading a stylesheet after our Custom CSS, in the page source. All my usual tricks for working around this have failed.

    Another option would be to turn off responsive layout under Appearance > Theme Settings > Layout. That would make the page load differently.

  7. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Here is some info discussing the topic: http://css-tricks.com/responsive-data-tables/. It might be possible to re-work this table for mobile and somehow get around the inline stylesheet that’s being loaded. It would unfortunately though be a custom development task. We do our best to help with small customisations, re-working this table would take a reasonable amount of effort.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More