About Us full width


#1

hi
Is there a way to make About Us section full width.
A have change it in row layout options for full screen streched.
I have a front page option selected as well.
http://wayair.com.pl/

The first widget is not streched even tough all the options are for full width streched.
The second widget is streched, but I have made 2 containers to do that.

The same story for the latest post widget . It doesn’t strech for full width.

It still look like this

Any idea how to do that?


#2

Hi,

Can you give me a screenshot of the pagebuilder row-column for those page?


#3

OK


#4

The same question for the blog . Any way to make it full width ?
http://wayair.com.pl/index.php/blog/


#5

Hi,

For the “About Us” widget, its indeed designed not to full width. To make it full width, you need to add this custom CSS code:

.about_text-area .container {
    max-width: 100%;
}

So you want to remove the sidebar? If yes, you can use this CSS code below:

.blog .content-area {
    width: 100%;
}

Put the CSS code in above into Customize > additional CSS

Regards,
Awan


#6

Thanks for that code
A want to make latest news full streched and the services as well.
All the rows would be streched 100%

About the blog I would rather keep the sidebar, but at the same time I would like to have it streched.


#7

Hi,

Looks like you already make your Latest News and the Services full width.
Then, here is the code to make the blog page stretched:

.blog .site-content.container {
    max-width: 100%;
}

@media only screen and (min-width: 1024px){
.blog .content-area {
    width: 70%;
}
.blog .widget-area{
   width: 25%;
}
}

#8

Thanks a lot. Works great,

Just one more thing. The services. They are still not streched. I would be greatfull for the code for that as well.

http://wayair.com.pl/index.php/services/kuchnia-francuska/


#9

There’s one thing that bugging me
i would like to present services with pictures above the text

Like in here


#10

I see… then please replace this CSS code (which I mentioned in above):

.blog .site-content.container {
    max-width: 100%;
}

@media only screen and (min-width: 1024px){
.blog .content-area {
    width: 70%;
}
.blog .widget-area{
   width: 25%;
}
}

with this:

.site-content.container {
    max-width: 100%;
}

@media only screen and (min-width: 1024px){
.content-area {
    width: 70%;
}
.widget-area{
   width: 25%;
}
}

There is no option to do that and no CSS script can handle that. But you can hire a Wordpress developer from upwork.com or codeable.io to help you further.


#11

Thanks for the code

It works for the services now.
But there is an area in the middle. Any way to make the pictures and the text streched to the right side.
http://wayair.com.pl/index.php/2018/02/16/wpis-2/

As for the pictures above the text services I will have to work around it somehow.


#12

Hi,

I just checked your blog page and your single post page. All of the contents are already stretched out. Looks like the code in above is already working. Please try to clear your browser cache.

SS: http://prntscr.com/ii410w


#13

I have changed the code from 100% to 90%

.blog .site-content.container {
max-width: 100%

When it was 100% there was a gap between the pictures / text and the sidebar.


#14

But it’s all right like that with that code but 100 changed for 90%.

Is it possible to change the size of the pictures the recent post widget on the sidebar.
Right now they have only 30% of the width of the sidebar.
Can I make them 50 or 70 % of that sidebar using a css code ?


#15

Here you go:

#secondary .recent-post .col-md-4, #secondary .recent-post .col-md-8 {
    width: 50%;
}

#16

Great. Works fine

Could You make that code for the front page as well?

Thanks


#17

I mean the home page


#18

So, you want this working for the homepage too?

Then just remove the #secondary selector from the code in above. So the code would be like this:

.recent-post .col-md-4, .recent-post .col-md-8 {
    width: 50%;
}