Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #110580
    abisbee
    Participant

    Hi.

    1. Is there CSS code that I can use to indent all text in the content section, or pad the content?

    2. Is there a way to narrow the width of the sidebar? Maybe this is an option in Pro?

    3. How can I remove the social widget from the header, but keep it in the footer? (not needed in 2 places…)

    Thanks.
    Alice

    #110607
    Pratik
    Keymaster

    Hi @abisbee,

    Can you please post in your site url?

    Regards,
    Pratik

    #110617
    abisbee
    Participant

    Thanks, Pratik! wwboston.org

    #110654
    Pratik
    Keymaster

    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

    #110657
    abisbee
    Participant

    Wow! Terrific, Pratik! Thank you!

    As you can see, the code worked. However, now there are 2 adjustments (and a question) needed:

    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?

    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?

    3. Will adjusting the widths of sidebar mess up the look of the site on smaller screens?

    Alice

    #110688
    Pratik
    Keymaster

    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

    #110779
    abisbee
    Participant

    Thank you, Pratik. That definitely helped with the side margins. However, there is still a lot of background showing above the menu bar (where the title and search buttons used to be). Is there a way of removing that space, or at least getting it down to a very narrow strip?

    Also, is there a way of moving the menu to below the header image?

    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.

    I appreciate your patience. You are very helpful. I think we will be done with the site once these issues are resolved. Next month we will work on the e-commerce part of the site…

    Alice

    #110801
    Pratik
    Keymaster

    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

    #110824
    abisbee
    Participant

    Pratik, you have been awesome. Thank you! You have solved all my problems. 🙂

    We will definitely be upgrading to the Pro version of the theme because we want to use e-commerce. We want to launch this site before doing that, though.

    Pro will also allow us to use a e-commerce friendly PayPal button, rather than just pointing to a PayPal site.

    Alice

    #110865
    Pratik
    Keymaster

    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

    #110869
    abisbee
    Participant

    Actually, I just learned that after these last CSS changes, the menu doesn’t appear on an iPhone. Is this because we removed the masthead? How can we get it back?

    Yes, I will submit a review.

    Alice

    #110873
    Pratik
    Keymaster

    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

    #110878
    abisbee
    Participant

    Still not working, I’m afraid. No menu on iPhone.

    #110879
    abisbee
    Participant

    And now there is a masthead on the iPad.

    #110881
    Pratik
    Keymaster

    Hi @abisbee,

    Can you try following instead of that:

    
    @media screen and (min-width: 990px) { 
        #masthead { display: none; }
    }
    
    #110882
    abisbee
    Participant

    Your message is incomplete…

    #110895
    Pratik
    Keymaster

    I have edited the message.

    #110896
    abisbee
    Participant

    IT WORKS!!!!! 🙂 Thank you!

    Alice

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘indent all text in Content; change sidebar width; remove widget from header’ is closed to new replies.