Joomla Templates Club 406,261 posts

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#808954

I would like to see my article’s content in full width, the default design seems to produce a middle table or area for pics and text, with left and right areas free.
please see attached image,
thanks!

---

Attachments:

1. 

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

#811691

Hi @darengr,

The width of the main content section is set with a fixed value. You can change this value via LESS or CSS:

• With LESS, you can open the file: /root/templates/ja_mono/less/variables.less

Line 317:

// Max width of main content
@content-max-width:         640px;

• To change in CSS file, you create a new file called custom.css in directory: root/templates/ja_mono/css/

and add this rule:

.t3-content {
  max-width: 640px;   <<< change to your desired value
}

Hope this helps.

1 user says Thank You to Saguaros for this useful post

1. gjc1

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#812907

thank you, yes, it helps a lot, I am aware of the custom.css use, one more question please:

this max-width, will be the same for the large screens as well (>1400px) with the 2 columns layout, or is there one number for the smaller screens and one for the larger ones?

the desired effect would be for example 640px for the larger screens right module (or even better half of the screen width=50%), and all available width (=100%) for the normal layout (1 column) for the smallers screens.
Is this possible to do?
darengr

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

#814273

You can achieve that by using media queries.

For example, you keep the default width for 640px as it now, then in screen size that greater than 1400px, it will take another width. To do that, you add this css rule:

@media screen and (min-width: 1400px) {
  .t3-content {
    max-width: 640px !important;   <<< change to your desired value
  }
}

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#825025

I will try your suggestions, thank you very much for your help.

[Author]

Posts