Styling content inside tabs and subtitle areas

I tried to edit the default template css
components/com_flexicontent/templates/default/css/item.css

.flexi.subtitle1 {
}
.flexi.subtitle2 {
}
.flexi.subtitle3 {
min-width: 100%;!important
text-align: center;!important
}

I tried to edit the above settings to see if i could control the way content is displayed inside the "subtitle 1,2,3" areas but i do not see any visible changes. I would like the text to spread full width and the be centered so i use the css styling in the italics

.tabbertab .flexi.element,
.subtitle1 .flexi.element,
.subtitle2 .flexi.element,
.subtitle3 .flexi.element {
display:block;
float: left;
margin: 0px 24px 12px 0px;
}

I want to know if these settings control the way content is displayed inside the - tabs in the front end

Hello,

i take time to answer you , so that you will not think that you are being ignored

Instead of implementing the styling in this particular case (this particular example that you described),

it is best to invest time to learn styling in depth

Here is a good guide:
(start with beginner and the intermediate and then advanced)

www.htmldog.com/guides/css/beginner/

Also you may wish to post to a CSS forum

Best Regards

I read a book on html 5 and css 3
HTML 5 and CSS 3 Visual Quick start guide
www.bruceontheloose.com/htmlcss/

I am unable to match the css classes in the style sheets with the areas in the front end they correspond to.
In this particular case subtitle 1,2,3.

min-width: 100%;!important
text-align: center;!important

Semicolon should be at the end

min-width: 100%!important;
text-align: center!important;

Hello,
i am unable to answer this question without spending a small or a considerable amount of time to test a particular page to add the desired effects, imagine me doing it for 100 of users ...

to give you a hint use a tool like firebug to examine particular HTML element what takes precedence in the CSS rules, and also to check if your rule is being overtaken by higher precedence rule or it is discarded e.g. because of syntax error

Regards

No, I don't want you to examine the page and correct the css for me. I want you to tell me which css classes would correspond to the which positions in the template that's all. I am trying to move certain fields that were in the default position to subtitle 1, 2, 3 doing that is changing a few styles. I just want to apply the same styles that i applied for Description to the others too. I was trying to do the same for "tabs" in the template position. Now i need to know the names of the classes that would affect the css on fields placed in tags.
Thanks for pointing that out my mistake about the !important tag

Hello boniaditya,

Now i need to know the names of the classes that would affect the css on fields placed in tags.

There might be a lot of classes used for some tags...
As ggppdk said, use firebug on Firefox or use chrome to find classes. You can simply turn off/on css rules and see if there is any effect or you could even add new css rules.

Can you post your URL?

Regards,

www.appvoc.flyonwheels.net/index ... 29-abysmal

This the url of the webpage.
You can see how the content and the background are spread only to the extent certain extent, and not across the field.
Had a similar problem earlier when i was using the blog template and i made the following corrections to get it right
max-width 100%

I posted those details in this post
www.flexicontent.org/forum/index.php?f=20&t=5673&rb_v=viewtopic
in the following class .customblock .element
but now i do not understand which class i have to edit

Hello add to your item.css (besides things you have already added:)

#flexicontent .flexi.element {
width: 100%!important;
}

-- You should duplicate the template default template before editting item.css

OR

-- place the new css into
joomla_folder/templates/myjoomlatemplate/css/flexicontent.css

Thank you! It is working now. I mean how do you know that it is that particular css class that has to be changed unless you are the one who wrote that template. I tried using firebug but it showed around three to four classes that are responsible.
I was doing the styles on a test site but i will follow your advice(about editing the template files) when i change styles on the live site.