Changing Sidebar width ?

[Michael Reiff]

Perhaps a silly question by a beginner.
How can i change the width of the sidebar in the template ?
I need it more narrow.
I found the the template, but i have no idea what i have to do in PHP.

Thank you in advance.

Michael

[J. Davis]

Hi Michael,

In order to edit page or post layout you need:
-install Child theme (you an get proper version (Lite/Pro) at Emmet Theme page )
– copy proper file of of required post or page template layout from Parent Theme to Child one
– edit it.

Could you specify what page template or is i post that you want to modify? I’ll point what file should be edited then.

Best regards,
John

[Michael Reiff]

Thank you for your reply and for the delay.

I want to change the sidebar with in Sides and Portfoliopages in Pro Version, because there are hughe to wide.

But as i told you, I’m a newbie and can´t find the proper files.

Thank you

[J. Davis]

Hi Michael,

In order to edit page template layout you need to copy page template file where is available sidebar (template-with-sidebar.php) from Parent theme to Child one. Then edit content grid from 8 to 9 and sidebar from 4 to 3. Thus you’ll make content area wider and narrow the sidebar.

Best regards,
John

[Luis Navas Calatayud]

Hi,
I’d like to do the same, to change the width of the sidebar, with the alpenhouse theme, but I don’t find the template (template-with-sidebar.php).
How can I do it, please?
Thank you

[J. Davis]

Hi Luis,

The Alpenhouse theme is structured in other way. You may try to chnage to width of the sisebar by adding the styles below to Appearance > Customize > Additional CSS:

@media (min-width: 992px) {
  .site-content .widget-area {
    width: 20%;
  }
  .content-area {
    width: 75%;
}
}

Let me know if it helps.

best regards,
J. Davis

[Luis Navas Calatayud]

Hi, J. Davis,
Thankyou for your quick answer.
Yes, it helped in the sidebar width, but not in the content width, that remains the same. I’ve changed the numbers, but doesn’t work.

King regards

[Andre Flores]

Hi, Luis!

You should also add the following CSS code to the same media query:

.site-main {
   max-width: 100%;
}

So the code will look as follows:

@media (min-width: 992px) {
  .site-content .widget-area {
    width: 20%;
  }
  .content-area {
    width: 75%;
  }
  .site-main {
    max-width: 100%;
}
}

Note, that you will need to change the accommodation type featured image width in order to have it fit the new content width.

Regards,
Andre

[Luis Navas Calatayud]

Hi,
Great! It’s now perfect.
Thank you very much

Luis

[Andre Flores]

Hi, Luis!

You are most welcome!

Regards,
Andre

[Author]

Posts