[SOLVED] Center column product page

SohBH wrote: ↑

Fri Aug 02, 2024 6:42 pm

Apply css to image link.

Code: Select all

display: flex;
align-items: center;
justify-content: center;

       {% if column_left or column_right %}
        {% set class = 'col-sm-6' %}
        {% else %}
        {% set class = 'col-sm-8' %}
        {% endif %}

        {% if column_left or column_right %}
        {% set class = 'col-sm-6' %}
        {% else %}
        {% set class = 'col-sm-4' %}
        {% endif %}

softmonke wrote: ↑

Sun Aug 04, 2024 6:17 am

SohBH wrote: ↑

Fri Aug 02, 2024 6:42 pm

Apply css to image link.

Code: Select all

display: flex;
align-items: center;
justify-content: center;

Hmm in OpenCart's default theme (which seems like what @antmagn is using albeit with a few changes to the colours of the theme), the product image is already centered using margin-left auto and margin-right auto - so I don't think this is necessary.

Correct me if I'm wrong but I think what @antmagn was trying to say is that they want the product image section and the product information section to each take up 50% of the page space rather than the current set up, where the product image section is taking up more space than the product information section. If that's the case, you have to understand that in Bootstrap (the CSS library that the default OpenCart theme is using), each row takes up 12 columns, and in the OpenCart's theme, the product image section in the product page takes up 8 columns, and the product information section takes up 4 columns.

If you take a look at the "product.twig" template file, you will see something like below:

Code: Select all

       {% if column_left or column_right %}
        {% set class = 'col-sm-6' %}
        {% else %}
        {% set class = 'col-sm-8' %}
        {% endif %}

That's for setting the column size of the product image, while taking into consideration modules that might have been added to the product page layout. So if you want it only take up 50% of the space, you should change "col-sm-8" to "col-sm-6". And then, on the other hand, for the product information section, look for the following:

Code: Select all

        {% if column_left or column_right %}
        {% set class = 'col-sm-6' %}
        {% else %}
        {% set class = 'col-sm-4' %}
        {% endif %}

And change "col-sm-4" to "col-sm-6". You can play around with the numbers to achieve your desired layout but just make sure that the numbers add up to 12 for a single row. You might want to check out Bootstrap's documentation here: https://getbootstrap.com/docs/3.4/css/#grid for a better, more detailed explanation on the grid system in Bootstrap.