Another Full Width Problem (live composer)

Hello there

First i wanted to thank you in advance for your effort to help.

I tried to solve my Problem reading and searching via google and here. But i couldn’t solve it alone.

So my Problem: The Front page is okay. But when i create another page i cant get it to be full width. I set it to default template and clicked also “full width”. But when i edit it with the live composer it won’t be full width. Perhaps to show what i mean i attached a print screen. If you see the print screen and you see the orange line of the live composer you see, that its not take the full width of the page/screen, and i tried also to set full width in the settings of live composer. When you can choose on type: wrapped/full width i choose full with.

I hope you understand what i mean? could you help me?

And then i have another question(i know its a lot sorry). The default settings on shapely is that you have on every page(not the homepage) 2 times the title. now on my print screen you see, i solved a part of that problem. With custom css display:none now there is only one time the title. But there is still a problem, because there is an empty space, because the second title its not deleted but “not visible” but still it takes a space. Could you help me also on that? How can i “delete” the second title so there is no “ugly” space?

Really thanks a lot for your effort trying to help.

kind regards
zeitkauf

Hi zeitkauf,

I hope you are well today and thank you for your questions.

So my Problem: The Front page is okay. But when i create another page i cant get it to be full width. I set it to default template and clicked also “full width”. But when i edit it with the live composer it won’t be full width. Perhaps to show what i mean i attached a print screen. If you see the print screen and you see the orange line of the live composer you see, that its not take the full width of the page/screen, and i tried also to set full width in the settings of live composer. When you can choose on type: wrapped/full width i choose full with.

Have you tried setting page layout to Full Width as shown in the screenshots shared in the following topic.

https://colorlibsupport.com/t/theme-adaptions/#post-63571

And then i have another question(i know its a lot sorry). The default settings on shapely is that you have on every page(not the homepage) 2 times the title. now on my print screen you see, i solved a part of that problem. With custom css display:none now there is only one time the title. But there is still a problem, because there is an empty space, because the second title its not deleted but “not visible” but still it takes a space. Could you help me also on that? How can i “delete” the second title so there is no “ugly” space?

You can try removing that by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

body.single-post header.entry-header,
body.page header.entry-header {
    display: none;
}

body.single-post section.content-area,
body.page section.content-area {
    padding-top: 15px;
}

Best Regards,
Movin

Hello Movin

Thx a lot for your answer!

So to my first problem with the full width:
Yes i did. like i wrote in my post. “I set it to default template and clicked also “full width”.” I added a print screen to show you. Like i said i tried to solve the problem reading here and i saw that you wrote that on other topics. So i changed that but nothing happened.

Edit: I dont know my but i tried to upload 2 times a screenshot to show you i did what you asked. And i coudlnt upload the screenshot.

Now i don’t know what to do. perhaps you know other solutions?

my second problem:
Thx now the second title is gone! But i have to clarify a question. It it normal that now you have still +/- 5px a white space? I suppose its normal, because on the homepage you have only a little white space between the logo with menu and the image.

again: thanks in advance for your help!

Yes i did. like i wrote in my post. “I set it to default template and clicked also “full width”.” I added a print screen to show you. Like i said i tried to solve the problem reading here and i saw that you wrote that on other topics. So i changed that but nothing happened.

I saw your first shared screenshot and it seems it’s displaying the full width page on your site.

To clarify this is a normal page https://colorlib.com/shapely/about/page-image-alignment/ and if it is set full width page then it displays as shown in the attached screenshot.

Are you expecting anything else as full width page?

Edit: I dont know my but i tried to upload 2 times a screenshot to show you i did what you asked. And i coudlnt upload the screenshot.

This is because you were trying to upload the image file type which is not permitted for security reasons.

Thx now the second title is gone! But i have to clarify a question. It it normal that now you have still +/- 5px a white space? I suppose its normal, because on the homepage you have only a little white space between the logo with menu and the image.

I have added 15px white space by using the above CSS code so that it won’t touch header but you can increase or decrease it by changing the value 15px in the above shared code.

Hello movin

Thx a lot for your help and pacience.

So i saw your screenshot and the goal would be to have it like that. I made that what you said, but its still like the link you posted. .

To clarify: I set in the settings of the wordpress page: Template->default. and select layout on specific page -> full width. But like i said. Its still like the link you posted.

Is there a solution? can you help me? I can immagine i’m not the only one with that problem. I am using firefox on ubuntu.

kind regards
zeitkauf

Hello again

After looking your attached Screenshot again, i saw the problem and i think its my fault. It’s alredy “full width”. But:

An example of Full-with for me is on your screenshot. Under the navigation bar there is for every site the title of a page with a grey background. And that background is full-width. Perhaps that’s not possible for the content area? or perhaps its not possible with the live composer?

If you want to make it full width like that then try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

body.page-id-2 .container{
    width: 100%;
}

Please change the page id 2 in the above code to the page ID that you want to make full width.

Hello movin

Thx a lot for your help! Now with that custom-css its better and nearly full-width. But strangely i have on the side white space and its not 100% full-width. To show you what i mean i attached a screenshot.

Is there any solutions you can get away also the withe space, so its really 100% full-width?

kind regards
zeitkauf

Hello again

i tried to solve the problem on my own with following code:

body.page-id-1900 .container{
    width: 100%;
    <strong>padding: 0px;</strong>
}

and with padding: 0px i reached on the left and the right finally full width. BUT now i have following problem. The Logo and the Site title is totally on the left border of the screen and not on the original place anymore(like in my previous screens). So my question: How do i set the logo(a placeholder at the moment) and the title of the page again on the place it was before? i attached another screen to show you.

and on the screenshot i marked also the white space under the page title with red color. i thought with padding 0px that white space would be disappear. Do you also would know how i could delete that white space? By the way: That white space is also there on the homepage under the navigation bar.

I know a lot of questions. If they are to much. I would appreciate if you could answer the question about the logo and the title. The white space problem is not that important.

Thx a lot in advance for your help and patience again and again :slight_smile:

kind regards
zeitkauf

To achieve this could you please try using the following CSS code instead of above shared CSS code?

body.page-id-1900 .container{
    width: 100%;
}
body.page-id-1900 #page .col-md-9{
  padding-left: 0;
  padding-right: 0;
}
body.page-id-1900 section.content-area {
    padding: 0;
}

Hello movin

i thought i show you the complete css code i added:

the first part is to eliminate the second title on each page.

body.single-post header.entry-header,
body.page header.entry-header {
    display: none;
}

body.single-post section.content-area,
body.page section.content-area {
    padding-top: 15px;
}

body.page-id-1900 .container{
    width: 100%;
}
body.page-id-1900 #page .col-md-9{
  padding-left: 0;
  padding-right: 0;
}
body.page-id-1900 section.content-area {
    padding: 0;
}

So the white space is gone on the other pages, but still there on the homepage/main page. But like i said thats not important i can live with that.

With that code i have also the full-width i wanted (thx for that) but…
… i have still the problem of the logo and title. With your code i added the title moved a little bit from the left border. But its still not there like it is one the homepage(where i would like to have it) - like in the demo of the theme:

is there a solution for that? because i think its ugly when the logo on the mainpage is on a different spot, whether on the other pages. So the goal is to have it on the other pages like that:

kind regards
zeitkauf

Could you please share me your site URL where it’s happening or share the screenshots of it how it is displaying and how you want it to display so that i can help you?

Hello movin

sure but i send you the link as private message because the site is still at the beginning. im going to create content when this problem is fixed.

http://zeitkauf.xyz/recherchen/ this is the direct page with the id 1900. After fixing the problem i would like to have the other pages like the page with the id 1900(except for the main page of course). So if you look at the page with the id 1900: The logo and the title are the the left. But the logo and the title should be on the spot where they are on the other pages. so that on all the pages nave the logo and title on the same spot.

Thx in advance for your help
kind regads
zeitkauf

Hello again

I noticed also that there is even a difference between the spot of the logo on the homepage(Home) an the other pages(HR, Kontakt) which are not part of the custom css(page id1900).

You can use the following CSS code to display the logo and menu on the same spot as other pages.

.container.nav-bar {
    max-width: 1170px;
}

Hello movin

Sorry i have to bother you again. I think i just did not explained it good enough. I have to say English is not my mother language, so its not easy for me to explain.

Not only the Logo should be at the same spot. But the content and the title of a page(the title under the logo) should be also on the same spot (like here: https://colorlib.com/shapely/about/page-image-alignment/ ). So i can create other pages like the main page. Where you can have a background-color or a background-image which are full-width, so that you have different “sections”. (https://colorlib.com/shapely/ <-main page )

i hope this time i could it explain better.

Thx for your help

Ps: When you switch between Home and a other page of my site, it seems that the logo on the homepage(home) is slightly on a different place. its a little bit strange. Is this only on my computer?

Sorry i have to bother you again. I think i just did not explained it good enough. I have to say English is not my mother language, so its not easy for me to explain.

Yes i have to scratch my head to understand your question but not an issue at all. I will try my best to understand it better. It helps me a lot if you share me the screenshots of the page that you are taking about.

Not only the Logo should be at the same spot. But the content and the title of a page(the title under the logo) should be also on the same spot

To make the title on the same spot please use the below CSS code.

body.page-id-1900 .page-title-section .container {
    max-width: 1170px;
}

Previously you wanted the content full width so i provided CSS code as following so i am not sure now why you want a content on same spot?

body.page-id-2 .container{
    width: 100%;
}

If your mind is changed now then just do not use the above CSS code.

Ps: When you switch between Home and a other page of my site, it seems that the logo on the homepage(home) is slightly on a different place. its a little bit strange. Is this only on my computer?

This is happening because your home page contains a lot of information compared to other pages so on your home page the vertical scrollbar is displayed as shown in the attached screenshot which occupies some space and moves content to the left.

Hello movin

You are a hero for me. Why? Because i think webdesign is very interesting and i also would like to have the same knowledge and skills. But for me it seems to be to complicated. I stopped years ago, when you had to create a site with tables to make the layout. :smiley:

Thx a lot for your help. I really appreciate it. Now its like i wanted. I have although a last question.

body.single-post header.entry-header,
body.page header.entry-header {
    display: none;
}

body.single-post section.content-area,
body.page section.content-area {
    padding-top: 15px;
}

body.page-id-1900 .container{
    width: 100%;
}
body.page-id-1900 #page .col-md-9{
  padding-left: 0;
  padding-right: 0;
}
body.page-id-1900 section.content-area {
    padding: 0;
}

.container.nav-bar {
    max-width: 1170px;
}

body.page-id-1900 .page-title-section .container {
    max-width: 1170px;
}

Now certain code its only for a certain page(page id1900). How do i have to change the code when i want to involve also the other pages? can i just add the specific page id to the code?

You are most welcome here :slight_smile:

Now certain code its only for a certain page(page id1900). How do i have to change the code when i want to involve also the other pages? can i just add the specific page id to the code?

Yes suppose you have to do the same foe the pages having page ids 1901 and 1902 then your code will be as following.

body.single-post header.entry-header,
body.page header.entry-header {
    display: none;
}

body.single-post section.content-area,
body.page section.content-area {
    padding-top: 15px;
}
body.page-id-1900 .container,
body.page-id-1901 .container,
body.page-id-1902 .container{
    width: 100%;
}
body.page-id-1900 #page .col-md-9,
body.page-id-1901 #page .col-md-9,
body.page-id-1902 #page .col-md-9{
  padding-left: 0;
  padding-right: 0;
}
body.page-id-1900 section.content-area,
body.page-id-1901 section.content-area,
body.page-id-1902 section.content-area {
    padding: 0;
}

.container.nav-bar {
    max-width: 1170px;
}
body.page-id-1900 .page-title-section .container,
body.page-id-1901 .page-title-section .container,
body.page-id-1902 .page-title-section .container {
    max-width: 1170px;
}