Wider Component Area Than The Rest Of The Webpage
Sissel Lundeby
Hi, I see that the container width of the Component area is different from the other sections of my webpage (wider): https://arbeid4.joomla4.no/ Do you know why?
Can you help me get the same container width for the Component area as the other sections? I also notice that there is no padding around the component area. This does not look good, specially on mobile; the text is difficult to read without any padding from the screen edge.
Sissel
Pavel
Accepted Answerthe issue with the padding is solved using css code
This is the right solution.
Try this code.
body.view-article.remove-container .body-innerwrapper > #sp-main-body > .container,
body.view-article.remove-container .body-innerwrapper > .sp-main-body > .container {
padding-left: 15px;
padding-right: 15px;
}
Ariba
Accepted AnswerHello
Thank you for your query, could you kindly provide a screenshot please? That would be helpful for a better understanding.
Sissel Lundeby
Accepted Answer
See: https://arbeid4.joomla4.no/images/Wider_component_area.png
I asked for help previously because the component area was fluid and someone at your team added the following css code to my template:
@media (min-width: 992px){ body.view-article.remove-container .body-innerwrapper>#sp-main-body>.container, body.view-article.remove-container .body-innerwrapper>.sp-main-body>.container { max-width: 960px; } } @media (min-width: 1200px){ body.view-article.remove-container .body-innerwrapper>#sp-main-body>.container, body.view-article.remove-container .body-innerwrapper>.sp-main-body>.container { max-width: 1140px; } } @media (min-width: 1400px){ body.view-article.remove-container .body-innerwrapper>#sp-main-body>.container, body.view-article.remove-container .body-innerwrapper>.sp-main-body>.container { max-width: 1320px; } }
Can the code be adjusted so the width of the component area is the same as the rest of the page? (the issue with the padding is solved using css code).
Sissel
Sissel Lundeby
Accepted AnswerYes, on the english page, but not in the Norwegian page; https://arbeid4.joomla4.no/