Joomla Templates Club 406,261 posts

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#204440

The box surrounding the main image on the product details page of my MijoShop store is too wide (726 x 228 instead of 228 x 228) and causing issues with the layout of the rest of the content.

I contacted Mijoshop and they indicated it was a template override issue with the Uber default template I am using, not a Mijoshop problem.

How do I correct the layout to appear as in the default sample layout (my layout and sample layout comparison are shown in attached images).

I also wish to reduce the size (height) of margin or padding just below the breadcrumb path and the Store search box (see shaded area in purple in image) as this seems to be a large area of whitespace on all pages of the site.

Thank you in advance for your help.

---

Attachments:

1. 
2. 
3. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#562207

Hi there,

About Mijoshop: I tried to switch back to default Joomla! template but faced the same issue with Mijo product page. Could you please recheck?

http://take.ms/b508g

In my local, it look like so

http://take.ms/jh4qn

With uber(of course I have customized css code for it)

http://take.ms/PD8BO

NOTE: I will create a test site in local with uber and mijoshop to take a closer look

About the height:

Open custom.css file then add

.t3-mainbody {
padding-top: 52px;
}

change the padding top value as you want(default set to 52px)

Thanks

---

Attachments:

1. 
2. 
3. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#562211

Uber template does not override anything on Mijoshop component. I check on “Weather Resistant Digital SLR Camera Carry Case with Shoulder Straps & Rain Cover for Canon EOS D Series” product and see the css style loads from Mijoshop default.

In this case, you have to contact Mijoshop component to check about this again.

---

Attachments:

1. 

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#562227

Thank you for the padding fix Leo, unfortunately I cannot access the images in your post and am unable to see them (I get a message to see the administrator).

I now have Joomlart telling me it is a Mijoshop problem and Mijoshop telling me it is a Joomlart issue………

I received this reply from Mijosoft support:

“Mijoshop using generic classes there and seems ja has .thumbnail class overrides in own theme files.
Please remove those overrides and try again.”

The image in my original post is in the category Suggestions-Others-Canon but the problem will be the same.

When I looked at the css code on the right in Chrome there are a number of changes to the default and it seems the image itself is not the problem (as the size does not change) but the box surrounding it auto expanding to 100% instead of (I think) 4px, could it be something to do with this code and .thumbnail class?

.mijoshop .thumbnail>img, .mijoshop .thumbnail a>img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#562240

@dealthenuts : Ninja Lead is right about Uber and Mijoshop latest 3.0.6 :), you can check my prev post to see the layout for Product page(Joomla! default template)

I checked your site and found something wrong here with

Take a look this screenshot: http://take.ms/Coaq0

As you can see the list style are wrong with UL class “media-list” ….<li>…

It should be <ul class=”thumbnails”> http://take.ms/1DlEP

I checked all plugins on your site and found the plugin named System – NoNumber ReReplacer, It seems a conflict between Mijo and Nonumber plugin here, It changed ul class thumbnails to ul class media-list.

I tried to disable this plugin and your site look correct like so: http://take.ms/X4xV2

Last, please add the css below to make thumbnails look better

.mijoshop .thumbnails > li {
margin-left: 20px;
float: left;
}

Result: http://take.ms/0ICsr

1 user says Thank You to phong nam for this useful post

1. Richard A

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#562338

Thank you Leo, you are correct, it was the definitely NoNumber ReReplacer causing the problem. The JGive component is not on Bootstrap 3 yet and I had class conversions to BS3 in the NoNumber component that also affected the Mijoshop layout.

I have disabled the NoNumber component, plugin and framework (as you did in your post) and made some adjustments to JGive to let it run correctly without a BS3 conversion, so the Mijoshop layout is now working as in your screen example http://take.ms/X4xV2

I tried the css thumbnail adjustment at the end of your post but after looking at the results on Kindle and mobile removed it to go back to your previous example above with the wide box and thumbnails below it as it allows me to use wider images in the main box if required and keep the overall view consistent and the responsive adjustments for smaller screens are very good.

Ref the css adjustment in your initial post (thank you) I tried a number of different variations and found one that works very well (in case anyone else reads this thread and is looking for a way to remove the whitespace at the top and bottom – I was initially only asking about top but found it is better to do both).

There are 2 default codes with padding:

.t3-mainbody {
padding-top: 52px;
padding-bottom: 52px;
}

and

.t3-content {
padding-top: 26px;
padding-bottom: 26px;
}

I changed the top and bottom padding in both codes to 5px (52px to 5px and 26px to 5px respectively) and there is enough of a whitespace gap now as the breadcrumb code at the top has a bottom padding of 8px and there is similar additional padding on content at the bottom of my pages.

Thank you again for your help, always appreciated!

[Author]

Posts