Joomla Templates Club 406,261 posts

[joachim funk Friend joachim funkJoin date: January 2013Posts: 45Downloads:4Uploads:7 Thanks: 15 Thanked: 3 times in 1 posts]

#193963

Hi!

When I open the Ja-Fixel-Template (default-style with sidebar-2) in responsive view, the sidebar-2 ist not properly separeted from the component. You can see this in the Fixel-demo > J!Blog:

I think, there’s a missing css-style. Could someone help me to fix this (little) layout-problem?
Thanks!

---

Attachments:

1. 
2. 
3. 

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

#519513

Hi joachim,

In fact, our template developers separated the content area and sidebar section on mobile view but the white background color of t3-mainbody makes the distance look not clear. You can try to create a custom.css file in templates/ja_fixel/css path and put below override css styles into:

@media (max-width: 767px) {
.container, .view-article.layout-home .container.t3-mainbody {
background: #fff;
}
}

[joachim funk Friend joachim funkJoin date: January 2013Posts: 45Downloads:4Uploads:7 Thanks: 15 Thanked: 3 times in 1 posts]

#519667

Hi Leo,

I’ve tried it with the css-override, but it don’t have any effect. I suppose, the different width of content and sidebar has something to do with:

.t3-content.has-sidebar2 {
background: url("../../../images/dark-line.gif") repeat-y right top;
}

When I disable this style in responsive view, the width is the same as the width of the sidebar-2. But in normal view, the right border of the content is missing… No solution.

I also tried a simple test-override for the vertical distance from content to sidebar-2:

.t3-content.span9.has-sidebar2 {
border-bottom: 2px solid black;
}

This is ok in responsive view, but I also get a problem in normal view: The sidebar-2-area ist 2px higher than the content-area. Also no solution.

Any other ideas?

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

#519811

Hi joachim,

I just want to say that this is more related to the background of content and mainbody area. If you still use the default style of our JA Fixel template, you can try to out below override css styles into custom.css file:

@media (max-width: 480px){
.container,
.view-article.layout-home .container.t3-mainbody {
background: transparent;
}

.layout-blog .t3-content {
background: #fff !important;
}
}


You will see the content and sidebar area separated like my attached image below.

And in your case, you can PM me the site’s url and a snapshot of how you want to achieve with the padding below content and sidebar area. I will take a look and give you the suitable css styles for it.

[joachim funk Friend joachim funkJoin date: January 2013Posts: 45Downloads:4Uploads:7 Thanks: 15 Thanked: 3 times in 1 posts]

#519854

Thanks – I’ve sent you a PM with more information…

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

#519995

Please backup and open /templates/ja_fixel/css/themes/fixel-theme/template-responsive.css file, then follow steps below:

– at 2600th line, change:

.has-sidebar2,
.t3-sidebar-2 {
background: none !important;
min-height: 0px !important;
}


to

.has-sidebar2,
.t3-sidebar-2 {
background: none;
min-height: 0px !important;
}

– at 2296th line, insert following override css styles:

.t3-content {
background-color: #fff !important;
}

.t3-sidebar.t3-sidebar-2 {
margin-top: 20px;
}

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

1. joachim funk

[joachim funk Friend joachim funkJoin date: January 2013Posts: 45Downloads:4Uploads:7 Thanks: 15 Thanked: 3 times in 1 posts]

#520038

Hi Leo,

great – this works fine, thanks a lot! The only little thing: The content has the 2px border-right… I suppose, this is a result of:


.t3-content.has-sidebar2 {
background: url("../../../images/dark-line.gif") repeat-y right top;
}


But it’s not a drama :laugh:

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

#520061

Yeah. I see. So, did the sidebar border on the right sorted out perfectly now?

[joachim funk Friend joachim funkJoin date: January 2013Posts: 45Downloads:4Uploads:7 Thanks: 15 Thanked: 3 times in 1 posts]

#520184

Yes, in responsive view the sidebar is separated from the content with your margin-top of 20px…

[Author]

Posts