Home>Support>Hand Coding Responsive Layout with Vantage Responsive Containers

Hand Coding Responsive Layout with Vantage Responsive Containers

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,

I’d like to use the Vantage page builder for customizing the site as a whole, but I have a page and a single page that I want to hand code a loop to display information entered using ACF. The listing is simple (it is a listing of items for rent with a page listing all items, and then you click a title or feature image and it goes to a single page that displays a full description).

What do I use as selectors for my containers? For a typical responsive framework, the total width of the site might be 16 columns, so you might have a feature image on the left that uses “4-columns” as a selector, and then the information on the right of it might have the selector “12-columns”, and after that everything would be responsive and slide around as it needs to.

Is there a list of selectors we can use to hand code a responsive layout using Vantage’s native selectors? I hope this makes sense!

Thanks!
Scott

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, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Scott

    Thanks for reaching out.

    In case you’re unsure, the basics of this would be to use a Vantage child theme, you can find a child starter theme for Vantage here: https://siteorigin.com/wp-content/uploads/2015/03/vantage-child-starter.zip. The easiest would be to copy page.php from the parent to the child theme and then rename the file as required. The file header would also need to be edited to establish your new page template: https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/.

    As to your main question, unfortunately, Vantage doesn’t have a default grid system included in the theme’s style.css file. You’d need to establish a grid yourself using Custom CSS. Sorry that I don’t have better news on this front.

  2. 9 years, 3 months ago Scott Kasprick

    No, that’s great – knowing their isn’t a grid system is just as useful! I’ve got the child theme, templates, etc., all underway. Thanks again, this gives me a plan of attack! :)

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

    Thanks for your understanding. I’m really glad to hear you’re on your way to getting this job sorted. If anything else comes up, please, let us know.

    All the best.

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