Post by Anderltu » Sat Sep 15, 2018 12:00 pm

Hello. I'm having problem with page width when surfing using mobile.

This is how page looks when .col-xs-6 { width: 50% is on :

Image

When I turn off .col-xs-6 { width: 50%:
Image

So I want to see one product after another, like when .col-xs-6 { width: 50% is off


Can someone help me? ( I was using chrome to turn off or turn on .col-xs-6 { width: 50% )

Attachments

wrong.jpg

wrong.jpg (43.89 KiB) Viewed 25037 times

good.jpg

good.jpg (47 KiB) Viewed 25037 times


Newbie

Posts

Joined
Sun Apr 15, 2018 4:16 am

Post by khnaz35 » Sat Sep 15, 2018 3:51 pm

Anderltu wrote:
Sat Sep 15, 2018 12:00 pm
Hello. I'm having problem with page width when surfing using mobile.

This is how page looks when .col-xs-6 { width: 50% is on :

Image

When I turn off .col-xs-6 { width: 50%:
Image

So I want to see one product after another, like when .col-xs-6 { width: 50% is off


Can someone help me? ( I was using chrome to turn off or turn on .col-xs-6 { width: 50% )
OC version , Journal theme ?

Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by Anderltu » Sat Sep 15, 2018 4:09 pm

khnaz35 wrote:
Sat Sep 15, 2018 3:51 pm
Anderltu wrote:
Sat Sep 15, 2018 12:00 pm
Hello. I'm having problem with page width when surfing using mobile.

This is how page looks when .col-xs-6 { width: 50% is on :

Image

When I turn off .col-xs-6 { width: 50%:
Image

So I want to see one product after another, like when .col-xs-6 { width: 50% is off


Can someone help me? ( I was using chrome to turn off or turn on .col-xs-6 { width: 50% )
OC version , Journal theme ?
Version - 3.0.2.0
Theme - https://themeforest.net/item/mimosa-res ... e/20625516

Newbie

Posts

Joined
Sun Apr 15, 2018 4:16 am

Post by Anderltu » Sat Sep 15, 2018 8:49 pm

I guess I found solution.
I saw this code in using Chrome source viewer in catalog/view/theme/Theme_NAME/stylesheet/stylesheet.css

Code: Select all

@media (max-width: 991px)
.custom-products .product-grid:nth-child(2n+1) {
    clear: both;
I changed it only (2n+1) to (1n)

Code: Select all

@media (max-width: 991px)
.custom-products .product-grid:nth-child(1n) {
    clear: both;
So, Instead 2 columns now only one column is left with products, but the second column was still there, but was not usable, just blank space.
Then again using Chrome I found this code located in /catalog/view/javascript/bootstrap/css/bootstrap.min.css

Code: Select all

.col-xs-6 {
    width: 50%;
}
I decided not to change it, because I didin't know what it will effect in website. Instead I added this code in catalog/view/theme/Theme_NAME/stylesheet/stylesheet.css:

Code: Select all

.col-xs-6 {
    width: 100%;
}
And it worked. Now, when surfing webiste using mobile phone, I see only one column with products in full width.

But still I think it's bad solution.
P.S. Sorry for bad grammar

Newbie

Posts

Joined
Sun Apr 15, 2018 4:16 am

Post by xxvirusxx » Sun Sep 16, 2018 4:46 pm

Why don`t ask theme support?

Upgrade Service | OC 2.3.0.2 PHP 8 | My Custom OC 3.0.3.8 | Buy me a beer


User avatar
Expert Member

Posts

Joined
Tue Jul 17, 2012 10:35 pm
Location - România

Post by Anderltu » Fri Sep 21, 2018 1:33 am

xxvirusxx wrote:
Sun Sep 16, 2018 4:46 pm
Why don`t ask theme support?
Because I was not the first person who created the website. The owner of the website is not able to contact person which started creation of website. If I want help from theme support I need to login with that account from which template was bought . :(

Newbie

Posts

Joined
Sun Apr 15, 2018 4:16 am

Post by IP_CAM » Fri Sep 21, 2018 9:40 am

Well, the only problem is, that paid Custom Extensions and Code are not part
of this user forum. But your Client should have bought this Theme, and not his
former Installer, otherways, your Client would illegally use that theme in the first
place, if he cannot prove to you, to have bought this Theme in a 'legal' manner.
See, what I mean ? ;)
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Who is online

Users browsing this forum: No registered users and 71 guests