[veerle]

Hello,

I would like to adjust my website, as I think there is too much white at both sides of my website: http://analiciafortes.com/. How can I make the content area wider?

Secondly, I would like to have a thin line under “About me/ (over mij in dutch) “in the sidebar area. How can I create this? The line should be black and as wide as the picture beneath it.

Then, I would also like to have a black frame/line around the sidebar area, so that the sidebar area is a box. How can I create this?

[Pratik]

@veer:
You can add following CSS code in Appearance=> Customize=> Theme Options => Custom CSS box:
For first issue:

#content .wrapper {
    width: 1300px; /* Increase/Decrease the size that suits to your need */
}
/* Use following to increase main content width too if needed */
#main {
    width: 850px; /* Increase/Decrease the size that suits to your need */
}

For second issue,

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

For third issue, if you want a box on all the sidebar area, use following code:

.sidebar-primary {
    border: 1px solid black;
}

If you want box on each widget, use following code:

.sidebar-primary section {
    border: 1px solid black;
    padding: 20px; /* Remove this if you do not want any space between widgets and border */
}

Let me know how it works out.

Regards,
Pratik

[veerle]

Thank you so much Pratik! It worked!

I would also like to create a black line under: “meest recente berichten” ( the text should be 1 line, instead of tw0) and “Recente reacties”. What would be the code for that?

Thereby, I would like to have a black line above the footer and the footer should be a bit smaller.

And, at last, I would like to have a frame around very post seperately.

Thank you so much for helping!

[veerle]

Ooh Im so sorry, one more question!

I would like to add a bit more space between the two columns and less space between the right column and the sidebar. How can I change this?

Thank you!

[Pratik]

@veer:
Here are the codes:
<hr>
I would also like to create a black line under: “meest recente berichten” ( the text should be 1 line, instead of tw0) and “Recente reacties”. What would be the code for that?
* For this, please remove following code:

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

and add in this one:

.sidebar-primary .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

————————————————————————–
Thereby, I would like to have a black line above the footer and the footer should be a bit smaller.

/* Add black line above footer */
#colophon {
    border-top: 1px solid #000000;
}

/* Decrease footer */
#site-generator {
    padding-bottom: 0px; /* Increase/decrease to add space on top of footer */
    padding-top: 0px; /* Increase/decrease to add space on bottom of footer */
}

————————————————————————–
I would like to have a frame around very post seperately.

.home #main article .archive-post-wrap {
    border: 1px solid;
    padding: 20px; /* Increase/decrease to add/remove space between border and content */
}

————————————————————————–
I would like to add a bit more space between the two columns and less space between the right column and the sidebar. How can I change this?
* After adding above code, there should be more space between the posts. Let me know if you want more space and I will provide you code for it. ( I am not providing the code now because I need to see how it looks after you have added the code. )
For space between sidebar and content, use following code:

.sidebar-primary {
    width: 400px;
}

————————————————————————–
Note: Now, there might be some issues in mobile devices, once you are done adding the codes, please let me know and I will provide you with code for other devices too.

[veerle]

Hi Pratik,

I’ve insert the codes! Thanks again!

Indeed, the mobile site isn’t working correctly anymore. Could you fix this?

Kind regards,

Veerle

[Pratik]

Please replace the codes with this one:

@media screen and (min-width: 1024px){
    #content .wrapper {
        width: 1300px; /* Increase/Decrease the size that suits to your need */
    }

    /* Use following to increase main content width too if needed */
    #main {
        width: 850px; /* Increase/Decrease the size that suits to your need */
    }

    .sidebar-primary {
        width: 400px;
    }
}

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

.sidebar-primary .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

/* Add black line above footer */
#colophon {
    border-top: 1px solid pink;
}

#site-generator {
    padding-bottom: 0px; /* Increase/decrease to add space on top of footer */
    padding-top: 0px; /* Increase/decrease to add space on bottom of footer */
}

.sidebar-primary section {
    border: 1px dotted pink;
    padding: 20px; /* Remove this if you do not want any space between widgets and border */
}

I have made responsive edits as well.

Let me know how it goes.

[Pratik]

Just replace the codes that I have given in this post from

#content .wrapper {
    width: 1300px; /* Increase/Decrease the size that suits to your need */
}

.....

[veerle]

I tried, but on mobile devices, the featured slider appears right and the blog posts appear left..

[Pratik]

I cannot see the code, have you added it?

Please remove the previous code in your custom css box from

#content .wrapper {
    width: 1300px; /* Increase/Decrease the size that suits to your need */
}

and everything below it and add in following code:

@media screen and (min-width: 1024px){
    #content .wrapper {
        width: 1300px; /* Increase/Decrease the size that suits to your need */
    }

    /* Use following to increase main content width too if needed */
    #main {
        width: 850px; /* Increase/Decrease the size that suits to your need */
    }

    .sidebar-primary {
        width: 400px;
    }
}

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

.sidebar-primary .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

#text-3 .widget-title {
     border-bottom: 1px solid black; /* Increase/Decrease 1px to increase/decrease border size */
}

/* Add black line above footer */
#colophon {
    border-top: 1px solid pink;
}

#site-generator {
    padding-bottom: 0px; /* Increase/decrease to add space on top of footer */
    padding-top: 0px; /* Increase/decrease to add space on bottom of footer */
}

.sidebar-primary section {
    border: 1px dotted pink;
    padding: 20px; /* Remove this if you do not want any space between widgets and border */
}

[veerle]

Yes it worked!

Thanks for all your help!

[Author]

Posts