indent all text in Content; change sidebar width; remove widget from header

Hi @abisbee,

Can you please post in your site url?

Regards,
Pratik

Hi @abisbee,
1. Is there CSS code that I can use to indent all text in the content section, or pad the content?
There is a way to pad the content. Use following code in Appearance=> Customize=> Additional CSS:

@media screen and (min-width: 990px) {

#content .wrapper {
    padding: 50px; /* Increase/decrease this number to increase/decrease the padding */
}
}

2. Is there a way to narrow the width of the sidebar? Maybe this is an option in Pro?
There is no option in Pro theme as well to narrow the width. You need to use following code:

@media screen and (min-width: 990px) {
.sidebar-primary {
    width: 250px; /* Increase/Decrease This size */
}
}

3. How can I remove the social widget from the header, but keep it in the footer? (not needed in 2 places…)
You can upgrade to pro version to completely remove this from header and even add in other stuff. In free version, you can just hide it using following code:

.sidebar-header-right {
    display: none;
}

Regards,
Pratik

Hi @Abisbee,

1. Widgets and text have now been removed from the header, but a lot of blank space remains. How can I reduce the height so that there isn’t all that wasted space up there?
I think you only want indent on left. Remove #content .wrapper { ... } and try Following code:

@media screen and (min-width: 990px) {
    #main { margin-left: 40px; }
}

Increase/Decrease 40px to adjust the margin as per your requirement.
This will not add space on top, right or bottom, only left.

2. I love the indented content, but the main content area is too narrow. How can I reduce the padding-right in the content section?
Above answer should work for this as well.

3. Will adjusting the widths of sidebar mess up the look of the site on smaller screens?
I have given you code so that it only works for screen target than 990px. This will not affect smaller screens.

Regards,
Pratik

Hi @abisbee,

You can remove it by using following code:

#masthead {
    display: none;
}

Also, is there a way of moving the menu to below the header image?
There is this option in Pro version. For that, you need to upgrade to Pro version. Checkout Theme Instructions for more info.

And finally, at the bottom of the home page we have an image on the left and a poem to the right of the image. It looks great on a laptop or monitor, but on an iPad, the space for the text is not wide enough and is badly formatted. I could make an image with the text in it so that the whole image drops lower on an ipad, but I was wondering if you know a better way.
May you can try following:

@media screen and (max-width: 1280px) {
    #attachment_158, #attachment_158 img { width: 100% !important; }
}

This will drop the text below the image on smaller screens. If this does not work, you have to used your method of adding text to image.

This is a recommendation, but e-commerce (WooCommerce) is only supported in Pro version of the theme ,so you might want to check it our.

Regards,
Pratik

Hi @abisbee,

I am glad everything was resolved. If you liked our theme and support, please help us by leaving a review at https://wordpress.org/support/theme/catch-responsive/reviews/.

Regards,
Pratik

Hi @abisbee,

Ah yes. Sorry for that, please use

@media screen and (max-width: 990px) { 
    #masthead { display: none; }
}

Replace the masthead code. Sorry for inconvenience.

Regards,
Pratik