Joomla Templates Club 406,261 posts

[kehzen Friend kehzenJoin date: October 2014Posts: 15Downloads:0Uploads:5]

#202382

Hi,

Already read through all possible threads. Closest to this is http://www.joomlart.com/forums/topic/center-the-block/ but no luck.

Please take a look at http://www.kzm.com.my

Introducing
1. I have changed the title to Relate. But I only have 2 items. How to make the two item centralize nicely?

2. I need to replace the icon. The current images replaced seem too large in size. What is the recommended size?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#554019

Can you, possibly, throw together a screenshot mock-up of what it is, specifically, you are wanting to modify?

[kehzen Friend kehzenJoin date: October 2014Posts: 15Downloads:0Uploads:5]

#554186

Attached image of what I want to achieve.

---

Attachments:

1. 
2. 
3. 

[binhnk Friend binhnkJoin date: April 2013Posts: 3Downloads:1Uploads:0 Thanks: 2 Thanked: 1 times in 2 posts]

#554342

Hi Kezel,
I’ve reviewed your site with checking html code. Something went wrong with the HTML markup of custom HTML modules on your site
1.

<div class=”row-fluid”>
<div class=”custom introducing section2″>
<div class=”introducing”>
<a class=”modal_link cboxElement” href=”….”>
<div class=”span4 block”>Your content</div>
</a>
<div>
</div>
</div>

it should be edited to become

<div class=”custom introducing section2″>
<div class=”introducing”>
<div class=”row-fluid”>

<div class=”span4 block”><a class=”modal_link cboxElement” href=”….” style=”display: block;”>Your content</a></div>

<div>
</div>
</div>

the same for other blocks, correct structure always is <div class=”row-fluid”><div class=”span*”><div class=”..etc**”>your content</div>

2. Then open /templates/ja_onepage/css/custom.css , look for this css rule:

@media (min-width: 1200px)
.row-fluid .span4 {
width: 33.3% !important;
}


It should be

@media (min-width: 1200px)
.row-fluid .span4 {
width: 33.3% !important;
margin: 0;
}


P/s: DO NOT override base bootstrap classes.

Regard!

[kehzen Friend kehzenJoin date: October 2014Posts: 15Downloads:0Uploads:5]

#554530

Hi Binhk,

Thank you for feedback.

Corrected the <div> structure as advice. I actually use modal no number plugin to wrap around image to show custom pop up.

Added below code to /templates/ja_onepage/css/custom.css, however, the 2 items still align to left.

@media (min-width: 1200px)
.row-fluid .span4 {
width: 33.3% !important;
margin: 0;
}

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#554713

Try adding this css rule in above ‘custom.css’ file:


@screen (min-width: 1024px) {
.introducing.section2 .container .row-fluid {
margin-left: 190px;
}
}


[kehzen Friend kehzenJoin date: October 2014Posts: 15Downloads:0Uploads:5]

#554907

Dear Saguaros,

Applied the code to custom.css as suggested. Seem nothing change :((

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#554969

Hi kehzen,

I don’t see my above css is applied on your site, you can PM me admin and ftp credentials of your site, I will check it directly

[kehzen Friend kehzenJoin date: October 2014Posts: 15Downloads:0Uploads:5]

#555350

Hi Saguaros,

Already PM you the admin login last week. Please check. Thank.s

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#555398

I overrode the style for modern theme on your site via this file: /templates/ja_onepage/local/css/themes/modern/bootstrap.css and add above css into the end of this file. You can take a look

[kehzen Friend kehzenJoin date: October 2014Posts: 15Downloads:0Uploads:5]

#555506

Hi Saguaros,

Checked. The 2 items at my Relate session is nicely centered on browser when viewing from laptop.
However, it won’t auto adjust when viewing from mobile phone?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#555658

Could you check again the FTP account? as I can’t access with info you sent me now.

[kehzen Friend kehzenJoin date: October 2014Posts: 15Downloads:0Uploads:5]

#556550

Hi Saguaros,

Resent you the FTP login and URL.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#556586

I changed the added css to:

@media (min-width: 1200px) {
.introducing.section2.addmargin .container .row-fluid {
margin-left: 190px;
}
}


Kindly check again on your mobile phone.

[kehzen Friend kehzenJoin date: October 2014Posts: 15Downloads:0Uploads:5]

#556720

Hi Saguaros,

Saw the code updated at /templates/ja_onepage/local/css/themes/modern/bootstrap.css. The session display nicely at Web page and mobile phone now. Thanks.

[Author]

Posts