Support » Theme: Solon » Slider dimensions resize

  • I want to make the slider smaller, to resize not only the height but also the width. There is a costume CSS code for that?

Viewing 14 replies - 1 through 14 (of 14 total)
  • Hi Nanumihai,

    I’ve visited the live demo of your theme and the slider looks perfectly responsive:

    Could you please post a link to your web page where you have the slider showing, so that it could be easier to work out what the problem may be.

    – Maria Antonietta
    I want also to resize the header height and font dimensions of the header. Thx!

    Thanks for getting back with a link.

    The slider changes its height because it follows the height of whatever image you put in there. However, its width is always 100% of its container because this is the nature of responsive images. If you resize the width to a smaller size, some of the content gets cut off. You can try this out for yourself:

    .flexslider {
      max-width: 80%;

    You could try adding another element, adjust its size and then insert the slider inside this element. I’m not too sure how comfortable you are with WordPress template files, but unless you’re a developer, my recommendation is to keep the slider width at its default size.

    As for the header height, you could adjust the height using this code:

    .site-header {
        max-height: 200px;

    Replace 200px with your chosen height value. However, be mindful of the fact that if you make the header a fixed height instead of letting it grow with its content, the content could spill over, especially on smaller screens.

    To change the font size in the site title, use this CSS:

    .site-title {
        font-size: 40px;

    And to change the tagline, use this snippet:

    .site-description {
        font-size: 20px;

    You’re free to replace 40px and 20px with your chosen font size.

    I hope this helps 🙂

    2 more questions: do I reduce the height of the social media widgets in header?
    2. How can I center the slider after I reduced it.s size?

    The social icons are icon fonts, therefore you could reduce the font size, like so:

    .social-widget a::before,
    .social-navigation li a::before {
        font-size: 16px;

    To center the slider, modify the existing margin value like this:

    .flexslider {
        margin: 0 auto 30px;

    one more question and I.m done 🙂
    how do I decrease the height of the social menu (with those social incons) and the main menu height? Thank you very much for your effort!

    You could use this code to shorten the social navigation:

    .social-navigation {
        max-height: 40px;

    If the social icons look misplaced after you do that, try adjusting it with this:

    .social-navigation ul {
        margin-top: -10px;

    I hope this helps 🙂

    I think I made something wrong with the resolution on the mobile layout. On my iPhone6S the whole content is visible only on 3 quarters of width

    How can i change the colour of the sidebar widgets? I want to make them white

    Hi there,
    Here’s how you can change the background color for the widgets:

    .widget {
      background-color: white;

    one more thing: I need to change also the colour of the text inside the widgets, now it is on white and it makes him invisible

    Just add:

    .widget, .widget a {
      color: #333;

    You can replace #333 with your favorite color.

    How can I manage my posts in such a manner that those who are played in the slider to not be repeated in the latest posts in the home page?

    is it possible?

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Slider dimensions resize’ is closed to new replies.