Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Item width (container?) can be easily changed

Featured Lock Resolved Task
Hi.
I use ultimate helix and for home use sp page builder pro use.

I would like you to implement in the template an easy way to adjust the width of the articles in a visual way too.
I would like to adjust the width of my articles.
I don't mean boxed layout. I deliberately removed the boxed layout, and in the home I chose the right padding for each device (PC, tablet, moble).
I would also like to be able to choose the width of the left and right position.

Right now what solutions are there to do these things?
Thank you!

12 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
in general, you have to use custom CSS to override the default styles.
Yes, it requests knowing CSS, without it's not possible.
Hopefully, articles give an extra class to "body" so you can add extra styles only for single article view or articles blog view

First, start with this guide: https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Paul Frankowski - Staff

More than a month ago #Permalink
p.s.
Sorry, I am not sure if I understand that part
I would also like to be able to choose the width of the left and right position.


because you can change the width of the left and right column using Layout feature from Helix Ultimate settings

left-right.jpg

Attachments (1)

  • left-right.jpg
    left-right.jpg 69.1 KB

Asperger Way

More than a month ago #Permalink
For the question you didn't understand, ok, he understood and you answered me.
For the other thing I mean the width of the central part, where there is component.
So, I would like to narrow down both the article when opened (article view), and the category view with article intros.
It would be nice if you invented a drag-type way to decide the width.
however, what string of CSS should I use to do the width tests I want?

Attachments (2)

  • Article view.png
    Article view.png 347.4 KB
  • Category view.png
    Category view.png 553.5 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Can you create me a graphic mock-up what is your goal?
Now all I see that your article images are too small, not so wide as they could be.
---

For example,
to reduce the width of single article view you can use

.view-article .article-details {
max-width: 700px;
margin: 0 auto;}


about category view, maybe just use to display articles in two or three columns, yes from menu item settings to can change it

3c.jpg

Attachments (1)

  • 3c.jpg
    3c.jpg 210.9 KB

Asperger Way

More than a month ago #Permalink
It is not difficult.
The photos that I have inserted I have inserted specifically of that resolution and they are good so!
I have in no way occupied the left and right positions. And I'm not going to do that in the future.
However the text of the article and the text of the introductions of the articles in category view, now have a certain width, that from pc is a tot (and to the right and left of the article there is a certain empty space) from tablet there is less empty space.

I say this in other words.
From a pc, with the same font size, in a row there are for example 10 words, from a horizontal tablet, 9 words, from a tablet 8 words vertically, from a horizontal smartphone, 7 words, from a vertical smartphone, 6 words, and so away, as I use smaller and smaller smartphones.
So far we've understood each other.

I would like that from PC, instead of 10 words there are 9.
Explained better, I would like from the PC view, there were a little less word and line, so I would like to know how to reduce the maximum width of the article not in words of course, but in pixels.
I would like to be able to decide both the width of the single article and the width of the category view, that is by opening the menu item linked to a category, which shows me the articles of the category. But perhaps this that I ask is valid for both "views". Or not?

I want to avoid having to read the article in a PC, the user does not have to do as those who follow the tennis matches do, who have to turn their heads to the right and left to see the ball, in my case to read my article.
Do You understand now?

Asperger Way

More than a month ago #Permalink
The code you gave me entered it and what I wanted happens. albeit too tight. By default, how much is set? 900px?
.view-article .article-details
are 2 different things?
.view-article is the article view I meant.
.article-details what is it?
I ask because I saw that the category view has not changed, it has remained the same.
maybe instead of .article-details need another code?

Asperger Way

More than a month ago #Permalink
This is view category, for me:

https://www.aspergerway.com/blog/spettro-autistico

user and password is "offline" (no account with privileges, but only view site offline)

Asperger Way

More than a month ago #Permalink
At trial and error I discovered that the default maximum seems to be 1140px, if I'm not mistaken

Asperger Way

More than a month ago #Permalink
Maybe this code?
.container { max-width: 1140px; } obviously decreasing the number of pixels

There is a problem.
The menu wraps. I would like the menu to be left-aligned, just after the logo, not so far away. So that there are more menu items without wrapping.
I know I can change padding between menu items and font sizes, but it's not enough for me.

Paul Frankowski - Staff

More than a month ago #Permalink
You can do almost anything, but there is a thin line between support and customization.
Use Code Inspector and play...
---

You can change also columns grid in the header to change space reserved for logo and menu.
Just design your own custom header if the default (pre-made) have too many limitations. All info is inside Helix Ultimate documentation with video.

Asperger Way

More than a month ago #Permalink
If you tell me what it's called, what I want to change I do.
the code I received only changes the width of the article and not the width of the blog category view.
If I don't know what it's called a thing, I don't know what to look for ...
Curious that before buying SP Page Builder I had never been noticed the difference between support and customization, indeed .. and now yes ... ;-)

Asperger Way

More than a month ago #Permalink
I struggle to read the documentation when you don't even allow google translate to translate your site pages.
I insert the link of the documentation in google translate and google translate me always returns it in English.
In years and years of use of the web, the times that happened to me are counted on the fingers of one hand.
In this way, by force that users ask you .....
Make the site user friendly and users will ask you less directly ...


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 132
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 98
Toufiq

Toufiq

Total Accepted Answers: 26
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289852

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us