Hi

Thanks for contacting us. Could you please give me your site URL?

-Regards.

Hi Thanks for your reply. Sure, I have added it to the hidden content. The home page is a custom SP-Page, but the rest of the site should be just normal single articles. Thanks

Also the page is coming up with some errors as the following files are not found.

templates/nuron/css/bootstrap.min.css.map

templates/nuron/js/bootstrap.bundle.min.js.map

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (bootstrap.min.css.map, line 0)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (bootstrap.bundle.min.js.map, line 0)

Hi

For title header issue use this custom CSS

.article-details .article-details-top-wraper .article-header {
    margin: 0 !important;
}

Go to system--> https://prnt.sc/tDbSUJh6LiGu --> Default template-->Template options--> https://prnt.sc/A5nlsBvCQsqs And add your CSS there.

And for others issue please create a new forum post.

The CSS you provided seems to force the title over ot the left of the page. But in the template

https://demo2.joomshaper.com/2022/nuron/index.php/pages/about

The text and title are centred on the widescreen view.

Do you want it here? Then use this CSS

.article-details .article-details-top-wraper .article-header .article-details-title{
    position: relative;
    top: 100px;
}

Thankyou so much Mahtaz,

I have tried the CSS you proposed and it doesn't seem to work.

I have added more information in the hidden content.

Many thanks for any help you can provide. Neil

If you use this css then it seems like this which is ok right? https://prnt.sc/7pm9ohGPgdWm

.article-details .article-details-top-wraper .article-header {
    margin: 0 !important;
}

Sorry Mehtaz - the title and text on the left is not correct for this template and looks awful.

When a page loads with any normal content it has padding to the left and right.

I really don't understand why the template is not working normally when displaying a single article?

Can we make the single article look like is should, with the padding on left and right?

I have just created a test page that doesn't use the Joomla 4 single article and instead uses a component that publishes plain HTML, so you can see what the page should look like vs what it is now.

Ok then use this CSS

.article-details .article-details-top-wraper .article-header {
    margin: 0 !important;
}

#sp-main-body{
 padding: 50px !important;

}
.article-details .article-details-top-wraper{
      padding-bottom: 70px !important;
}

Thanks very much for your quick reply.

I have added the code and I get the following result (below in hidden content), which is still on the left and not in the centre block like this page: https://ne14.co.uk/rp/images/nuron2.png

I need to check this URL right? It seems ok in my end.

Hi Mehtaz,

Thanks again for your reply, but maybe things are not clear, so apologies if it's me :)

Unfortunately, the layout is not OK, as it should be central, with padding on the left and right, but it's left justified and 100% width - which looks awful.

I will send you a video. Please can you help?

Hi

That video is an unlisted video on YouTube, so you should be able to see it. Unless YouTube is blocked?

Hi Mehtaz,

I have re-enabled the admin access for you now and it will work.

Thanks, Neil

Hello Neil

I have used this CSS to

Template Options -> Custom Code -> Custom CSS

@media (min-width: 576px){
    .view-article #sp-main-body .container{
        max-width: 540px !important;
    }    
}
@media (min-width: 768px){
    .view-article #sp-main-body .container{
        max-width: 720px !important;
    }    
}
@media (min-width: 992px){
    .view-article #sp-main-body .container{
        max-width: 960px !important;
    }    
}
@media (min-width: 1200px){
    .view-article #sp-main-body .container{
        max-width: 1140px !important;
    }    
}
@media (min-width: 1400px){
    .view-article #sp-main-body .container{
        max-width: 1320px !important;
    }    
}

Please check your article now.

Best regards

That's AMAZING Ofi and Mahtaz! Thank you both.

The pages all align perfectly. The only minor thing is the title seems to be different on the single article pages. Not sure why the title would appear smaller than on the other pages?

You are welcome 😊

Please use this CSS to

Template Options -> Custom Code -> Custom CSS

.article-details .article-details-top-wraper .article-header .article-details-title {
    font-weight: 600;
    font-size: 68px;
}
.article-details .article-details-top-wraper .article-header{
    max-width: initial;
}

You are a star Ofi! 😊

It looks amazing! I did spot that the top menus are so far right that when a drop down menu shows, it seems to be off the screen slightly, like the title was.

Is this a simple fix?

Thank you so much Ofi! This is perfect and I really appreciate your excellent support. Review done.

You are welcome 😊

I am glad that I could help you. Have a great day!

I have noticed that there are two Errors on the page when it loads. Is this fixable as I am almost ready to launch the web site?

Error] Failed to load resource: the server responded with a status of 404 (Not Found) (bootstrap.min.css.map, line 0).

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (bootstrap.bundle.min.js.map, line 0)

I have put the URLs that it's looking for and not finding below in the hidden content.

In which page are these not loading?

Hi Ofi

I put a blank file in the location that the script was looking and it's all fine now.

Thanks again

You are welcome 😊