front page width

This topic has 24 replies, 4 voices, and was last updated 9 years, 3 months ago by Mahesh.

Viewing 20 posts - 1 through 20 (of 25 total)

1 2 →

Author

Posts
May 27, 2016 at 7:46 am #92393

ayxaaron
Participant

Hi,

How do I expand the content div of front page to be the same width as the slider?

Cheers,
Aaron

May 27, 2016 at 10:30 am #92402
Mahesh
Participant
@atxaaron:
Hi Aaron,

Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:
```
@media screen and (min-width: 981px) {
    .container {
        width: 100%;
    }

    #primary {
        width: 70%;
    }

    #secondary {
    	width: 25%;
    }
}
```
Regards,
Mahesh
May 27, 2016 at 10:58 am #92403

ayxaaron
Participant

Sorry, i meant, how do I expand the content so that it can fill up the white spaces as shown in the red box below

May 27, 2016 at 12:25 pm #92404
Mahesh
Participant
@ayxaaron: Add the follwing CSS.
```
.no-sidebar.content-full #main .container,
.no-sidebar.content-full #main #primary  {
    width: 100%;
}
```
Let me know if any problem.

Regards,
Mahesh
May 27, 2016 at 12:46 pm #92405

ayxaaron
Participant

Is there a way to limit the content width to be the same as the combined width of the logo and menu, or the width of the slider?

May 27, 2016 at 1:06 pm #92406
Mahesh
Participant
@ayxaaron: Do you mean to remove the padding in the content too? If so, add the following CSS:
```
#content .hentry {
    padding: 5px;
}
```
Let me know further.

Regards,
Mahesh
May 27, 2016 at 1:15 pm #92411

ayxaaron
Participant

After applying the CSS, it became like this:

However I need the page to display like this:

Thanks for your help!

May 27, 2016 at 1:17 pm #92412

ayxaaron
Participant

the original template is like this:

May 27, 2016 at 1:50 pm #92413
Mahesh
Participant
@ayxaaron: Sorry, I was checking on small desktop screen so didn’t knew the problem. Please use the following CSS.
```
#main .container {
      width: 100%
}
#primary {
      width: 100%;
      max-width: 1300px;
}
#primary #content .hentry {
      padding: 0
}
```
Let me know if any problem.

Regards,
Mahesh
May 27, 2016 at 1:53 pm #92414

ayxaaron
Participant

This works! Thanks so much 🙂

Cheers,
Aaron

May 27, 2016 at 1:59 pm #92415

ayxaaron
Participant

Sorry, I said it too early. The other pages were affected also.
Originally:

Now:

Can I keep it at original but change the homepage? Sorry for the trouble

May 27, 2016 at 3:18 pm #92428
Mahesh
Participant
ayxaaron: No problem, replace the earlier CSS with the following. This will make the content width equal to slider’s width in homepage only.
```
.home #main .container,
.home #main #primary  {
    width: 100%;
}
```
Regards,
Mahesh
May 27, 2016 at 3:33 pm #92430

ayxaaron
Participant

Problem solved, thanks a lot!

Cheers,
Aaron Ang

June 2, 2016 at 1:01 am #92760

Senn_9212_Arnegg
Participant

How do i can set the colum wider. the menue bar is in two rows and i want just one. the Theme-option setting ist “No Sidebar – one colume”. i tried the above css but it does not help

June 2, 2016 at 9:41 am #92780

Mahesh
Participant

@senn_9212_arnegg: Please post in your site url.

Regards,
Mahesh

June 2, 2016 at 11:15 am #92788

Senn_9212_Arnegg
Participant

sure.
http://www.wp.senn-maschinen.ch

June 2, 2016 at 4:49 pm #92800
Mahesh
Participant
@senn_9212_arnegg: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:
```
@media screen and (min-width: 481px) {
    .one-column .site {
        width: 90%
    }
}
```
Regards,
Mahesh
June 28, 2016 at 10:30 pm #94371

jadk001
Participant

Hi sorry, Not sure if I should make new or not – Trying something similar but want to keep some of the padding but no where near as much … for both front page and blog posts…

http://inspiredbymaps.com/

Any idea how to make it so just kind of a little border…I tried the CSS above but that removes the padding completly and looks a bit weird …

Thanks!

June 29, 2016 at 9:36 am #94403
Mahesh
Participant
@jadk001: Do you mean to add some padding to the whole page so it would seem like a border. Try the following CSS. Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS and add the following CSS:
```
#page {
    padding: 20px;
}
```
Let me know if any problem.

Regards,
Mahesh
June 30, 2016 at 11:34 pm #94497

jadk001
Participant

Hi Mahesh,

I will keep that as it looks great but sorry not what i meant.

Take for example this:

http://inspiredbymaps.com/where-ive-been/

I want the page to post to be as wide as the header…see how its only half width at the moment with alot of ‘gap’ either side?

Thanks so much!

Jordan
Author

Posts