This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Customize page for mobile devices

Open 7 replies premiumthemetheme-vantage
Mhspb
11 years ago · Last reply by Andrew Misplon 11 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Mhspb 11 years, 3 months ago

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

  2. Andrew Misplon Staff 11 years, 3 months ago

    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. Mhspb 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. Mhspb 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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. Andrew Misplon Staff 11 years, 3 months ago

    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.

Have a different question or issue?

Start New Thread