How to align the products in S5 tab show in horizontal scroll mode

infocubic

Hi,

In the home page I would like to have product or content if more then 3 there, it should be coming in horizontal scroll mode because the below too big gap appears since the other category has 4. Can someone help me?

teitbite

infocubic Hi. I'm afraid this wasn't build like that. It would require recodding the layout, which is not a small customization. We do not support such big changes unfortunately.

infocubic

teitbite

Okey I understand. Can you help me in above widgets of this?

The issue is alignment of the Images. I want the way I explained in the image below:

This image has to be aligned to center and the right side should not overlap on text...

This image to be moved down as it is overlapping on the top space.

Here I want to increase the image size as marked the position.

teitbite

infocubic Hi for 3. use this css:

#s5_left_column_wrap {
    width: 28% !important;
}

#s5_right_column_wrap {
    width: 16.5% !important;
    margin-left: -43.5% !important;
}

play with this values to make it as close as possible for Your need.

For 1&2 please tell me the url to the page where I'll be able to see it.

infocubic

teitbite

I have added the code but did not happened anything....

1 and 2 is just below the Training's & Workshops in the home page only. Kindly check the screen shot provided in my previous reply. Where the URL is visible...

teitbite

infocubic Hi. I see now that the widths for columns are set in template's configuration, this is why it was not possible to overwrite it. Please look into configuration or provide an access to joomla panel so I'll lead You to it.

For 1 and 2 please try this code:

#s5_pos_custom_4 .element .large_products_left img {
    position: absolute;
    width: 45%;
    left: 0px;
    bottom: auto;
    top: 50%;
    transform: translate(0,-50%);
}

#s5_pos_custom_4 .element .large_products_right img {
    margin-top: 0;
}

infocubic

teitbite

I have applied this codes also, nothing changed.. Please check I have updated the site admin details..

aman204

infocubic Kindly check now for 1) and 2) as I have added this specific CSS to /wp-content/themes/s5_regan_tech/css/custom.css file :

#s5_pos_custom_4 .large_products_left img {
    position: absolute;
    width: 45%;
    left: 0px;
    bottom: auto;
    top: 35%;
    transform: translate(0,-50%);
}

#s5_pos_custom_4 .large_products_right img {
    margin-top: 0;
}

Kindly ensure to clear your browser cache if changes dont reflect

teitbite

infocubic Hi. I cannot see the css code given being inserted into css files. Please make sure if it's added to correct file. Or even check if leaving it at the bottom of /wp-content/themes/s5_regan_tech/css/template.css file will not make a difference.

infocubic

teitbite

Please note that I have added the code in to Customize > Additional CSS

aman204

infocubic For 1) and 2), You may also view the screenshot where it appears fine as desired after adding CSS in custom.css file as shown in prior forum post

Kindly adjust top and margin-top accordingly

infocubic

aman204

Now it is fine..still I need one more help. How to align the below marked content vertically center?

Newly one problem started, the sidebar position has changed now on the pages. Pls see in the page below: I don't know who has changed..from our side except me no one has access to back end and I did not do any changes. I am really scared to share the site admin details with you guys.

https://blog.qsutra.com/services/trainings-workshops/

aman204

infocubic How to align the below marked content vertically center?

Try add this to custom.css file and adjust value accordingly :

#s5_right_column_wrap_inner #s5_right_top_wrap .textwidget{margin-top: 4em !important;}

Newly one problem started, the sidebar position has changed now on the pages.

Kindly confirm if you want us to troubleshoot the relative issue closely by accessing admin panel.

No changes had been done apart from adding CSS to specific file as mentioned here which could have any adverse impact on other sections of site and also, the same had been done after your trailing forum post that you are unable to get the desired results and it could be seen that suggested CSS wasnt there which could append to get the desired change

infocubic

aman204

Please troubleshoot and fix the issue ASAP.. the admin details already provided...

infocubic

aman204

Hello Aman,

Kindly check the issue regarding sidebar and update us soon....

teitbite

infocubic Hi. Please change the code I gave You previously from:

#s5_left_column_wrap {
    width: 28% !important;
}

#s5_right_column_wrap {
    width: 16.5% !important;
    margin-left: -43.5% !important;
}

.s5_slidesection #s5_left_column_wrap {
    width: 28% !important;
}

.s5_slidesection #s5_right_column_wrap {
    width: 16.5% !important;
    margin-left: -43.5% !important;
}

For the alignment question use this code:

.s5_slidesection #s5_right_top_wrap .textwidget {
    text-align: center;
}

aman204

infocubic Kindly check the issue regarding sidebar and update us soon....

You may kindly refer to previous CSS change suggested by @teitbite and try the same in relation to right column wrap not positioning as envisaged

Regards

dominic

Hi,
I have helped you resolve this issue, you can check your site now.
Regards,

infocubic

dominic

Thank you Dominic... I see always you provide ultimate solution......