Formatting Questions

Hi Themeco Staff,

I have a number of things I would like to fix/change, so I am just going to list them one by one:

  1. My products are neither flush with my browser, nor centered. How can I set the products to adapt to adapt to a 1080p screen size and/or have them centered. The products aren’t centered on mobile either. http://trueco2.com/products/

  2. For some reason my tabs don’t open automatically on my product pages. They used to, and now they don’t. I don’t see any settings to change this. How can I have my first tab open automatically? http://trueco2.com/product/2-lb-protein-powder/

  3. I would like to have the product image be centered on the product page rather than justified to the left. How can I center the images?

  4. If I don’t have enough text on my page, the footer still ends at a fixed distance. That wouldn’t be a huge problem, but the background color I have set just takes up the rest of the space after the foot. Can I have the footer always justify at the bottom regardless of how long a page is? http://trueco2.com/nothing/

  5. Is it possible to change the amount of space between the border of my text areas and the background color? It looks fine on mobile, but my shop page is loaded with background space and I would prefer a little thinner margin on my product pages as well.

  6. Similar to 5), can I change the spacing between products on the product page to reduce the amount of background shown?

All for now, I hope this isn’t too much for you. Thank you so much for your help!

Ari

hello, just scrolling down to see if I see my problem is here… I think you should head over to YouTube and watch intro WordPress tutorials. You are asking for many things that are basic WordPress options. they will help a lot for someone to type it all would be a nightmare… :smile:
peace!

Hello @azwick2,

Thanks for asking. :slight_smile:

  1. Please add following CSS under X > Theme Options > CSS:

    @media only screen and (max-width: 1024px) {
    .woocommerce ul.products {
    margin: 0 auto !important;
    text-align: center;
    display: block;
    }

    .woocommerce li.product {
    width: 25%;
    }
    }

  2. It seems that the problem is generated from an incompatible version of the Cornerstone and Theme. You are using the version 5.2.5 of the theme with the version 3.0.4 of the Cornerstone which is not compatible.

Please back up your website completely and update the theme to version 6.0.4.

  1. Kindly add following CSS under X > Theme Options > CSS:

    .woocommerce div.product .images figure {
    margin: 0 auto;
    text-align: center;
    }

  2. Please add following CSS under X > Theme Options > CSS:

    .single-product .entry-wrap {
    padding: 20px;
    }

  3. Please add following CSS under X > Theme Options > CSS:

    .single-product .x-container.max {
    width: 98%;
    }

Let us know how it goes.

Thanks.

Hi Prasant,

Thanks so much for getting back to me so quickly!

  1. You didn’t give an answer to this one.

  2. That worked great. Can I get the code for regular pages and posts?

Ari

Hi Ari,

4.) We can set minimum height on the main content container using the following CSS:

.x-main.full {
    min-height: 54vh; /*Adjust this value accordingly*/
}

5.) For post try this:

.single-post .entry-wrap {
    padding: 20px;
}

For page:

.page .entry-wrap {
    padding: 20px;
}

We can combine all those 3 CSS into 1 like this:

.single-post .entry-wrap,
.single-product .entry-wrap,
.page .entry-wrap{
    padding: 20px;
}

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.