Joomla Templates Club 406,261 posts

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#198751

Hi there,

I’ve got a couple of problems with the responsiveness of my site and was wondering if anyone can help me out.

Problem 1.

I need to shift the menu over a little bit so that it becomes aligned a bit better, see where the black lines are, I need to move to the left.

Problem 2.

As you can see my last menu item is half off the screen width approx 930px, how can I make it fit to this size?
Also there is a sideways scroll bar at the bottom, how can I get rid of this? Is it because of the menu item?

Problem 3.

Screen size approx 630px, as you can see the “latest products” module only has 1 product per row where as the “featured products” has 2 products per row. I’d like to make it display 2 products on “latest products” so that it matches.
Also there is a sideways scroll bar, how can I get rid of this or what part is affecting it?

Problem 4. last one 😉

Screen size approx 280px, as you can see there is a sideways scroll bar at the bottom but everything seems to fit on the page ok. How can I remove this?

I know there’s quite a few things there sorry, thanks in advance to anyone that can help me out 🙂

---

Attachments:

1. 
2. 
3. 
4. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#538789

Hi,

First, make sure to backup appropriate CSS files before make any changes.

1. To adjust main menu, please open the file root_folder/templates/ja_bookshop/css/themes/themedalguy/custom.css :

Look for this part :

.t3-mainnav {
border-left: 0 none;
border-radius: 0;
border-right: 0 none;
float: right;
max-width: 75%;
width: auto;
}


then change to :

.t3-mainnav {
border-left: 0 none;
border-radius: 0;
border-right: 0 none;
float: left;
max-width: 75%;
width: auto;
}

continue look for these declarations:

.logo {
float: left;
padding: 0;
width: 220px;
}

and adjust as follows:

.logo {
float: left;
padding: 0;
width: 295px;
}

2. Please open the file root_folder/templates/ja_bookshop/css/themes/themedalguy/bootstrap.css, look for this part :

@media (min-width: 768px) and (max-width: 919px) {
.hidden-sm {
display: none !important;
}
}

and update as follows:

@media (min-width: 768px) and (max-width: 930px) {
.hidden-sm {
display: none !important;
}
}

3. Open the file root_folder/components/com_mijoshop/opencart/catalog/view/theme/bookshop/stylesheet/stylesheet.css and made following changes:

Remove these CSS rules:

.box-product.betseller > div,
.box-product.latestproduct > div,
.box-product.mostviewed > div,
#related-products .product-grid > div,
.ja-product-grid > div {
width: 50% !important;
}

.product-grid,
.ja-product-grid {
margin: 0 -15px;
width: auto;
}

Open the file root_folder/http://www.themedalguy.com/templates/ja_bookshop/css/themes/themedalguy/custom.css and made following changes:

Remove these CSS rules:

.product-grid, .ja-product-grid {
margin-left: -5px;
margin-right: 0;
width: 100%;
}

Look for this part:

.product-grid.row-3 > div,
.ja-product-grid > div {
border: 1px solid #eee;
float: left;
margin: 5px;
max-width: 280px;
min-height: 280px;
min-width: 180px;
padding-top: 15px;
width: 31.8%;
}

and change to:

.product-grid.row-3 > div,
.ja-product-grid > div {
border: 1px solid #eee;
max-width: 280px;
min-height: 280px;
padding-top: 15px;
width: 31.8%;
}

4. For 280px screen, it’s impossible to adjust page element since we support mobile layout with minimum 360px and above only.

[Author]

Posts