Change width of white column

Home Forums Radiate Pro Change width of white column

Tagged: , ,

This topic contains 18 replies, has 5 voices, and was last updated by  Banstola Rajeeb 3 years, 5 months ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1237639

    André
    Participant

    I want to change the width of the white column. I mean the white column / page where you type all of your text. How do I do this?

    I still want to have the text have the same space before and after the text of the column / page.

    How do I do this?

    #1237866

    Bipin Singh
    Moderator

    Hi Andre,

    Could you provide us your link to that page and also can you mention your query in more detail.

    Thank you
    ThemeGrill Support Team.

    #1237886

    André
    Participant

    Hello Bipin,

    The link is: https://mansite.nl/

    What I want to do is that I make the white column on the homepage and the blogposts and page (basically everywhere on the website) smaller. I want to have 50 – 75 characters in one line. Like this: https://000.nl/posts/filosofie-als-marketingstrategie/

    Look here for some pictures for more details:

    https://i64.tinypic.com/15hyftd.png
    https://i67.tinypic.com/2088nf4.jpg

    Hope you understand me better now. If you have any questions, just ask.

    Kind Regards,
    André

    #1238018

    Bipin Singh
    Moderator

    Hi André,

    Try the following code in custom CSS Box in Customize-> Design:

    #primary {
        width: 58%;
    }

    Change the value according to your requirement to increase/decrease content width.

    Thanks

    #1238042

    André
    Participant

    Thanks a lot Bipin. It worked!

    Can you also help me with the following? I want to make the white space between the front of the text en the end of the test a bit bigger. How do I do this?

    See: https://i67.tinypic.com/2088nf4.jpg -> when you look at the picture it is the text in red with ¨like this¨ on the right en the left.

    Thank you!

    #1238057

    André
    Participant

    Can you also help me with the following:

    The size of the white column looks great on my laptop, but on my iPhone it looks really small.

    Is it possible to have the size of the white column as I have it now on my laptop and have the size that is default for the theme for mobile phones?

    Thanks

    #1238192

    Bipin Singh
    Moderator

    Hi André,

    Try the following code:

    .hentry {
        padding-left: 6rem;
        padding-right: 6rem;
    }
    @media screen and (max-width: 768px) {
    #primary {
        width: 100%;
    }
    .hentry {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    }

    Hope this helps

    Thank you
    ThemeGrill Support Team

    #1238273

    André
    Participant

    Thank you. It worked! Looks really great.

    Can you also help me with the following:

    I changed the font of the website with:

    p {
    font-size: 110%;
    }

    It looks good, but the bullet points don´t change in size. How do I fix this? I found something that worked, but then not every bullet point did change in the right size. Also the comments then changed to big.

    So, what to do? How to change the size of the bullet point to the right size?

    Thank you!

    #1238274

    André
    Participant

    Oh yes, the thing for the mobile phone doesn´t work. On mobile phone the website is too small.

    #1238282

    André
    Participant

    You can forget the problem of the bullet points. I figured it out! 🙂

    #1238295

    André
    Participant

    Hello,

    The mobile-phone thing also works now. In the code below I put a white space between padding-right and media screen. That worked!

    .hentry {
    padding-left: 6rem;
    padding-right: 6rem;
    }
    ->>>>>I put the white space here.
    @media screen and (max-width: 768px) {
    #primary {
    width: 100%;
    }
    .hentry {
    padding-left: 2rem;
    padding-right: 2rem;
    }
    }

    #1238300

    André
    Participant

    Hello,

    First of all: thanks a lot for all the help. Here a few more questions and then I think I am done. I am such a perfectionist. Sometimes almost drive myself crazy. I definetely am going te leave a raving review for all the great help!

    So here the questions:

    1. padding

    I want to change the:

    padding-top
    padding-bottom

    to create more white space: how do I do this?

    2. mobile phone

    When you click on an article, you see to much grey space on the right.

    What to do? I want to whole page filled with wide.

    3. when you slide down I want to see ¨Mansite.nl + home button, man-icon + search icon out of side. Like in https://000.nl.

    How do I do this?

    Thanks a lot!

    #1238396

    Bishal Napit
    Moderator

    Hi, André.

    You can paste this CSS code in the Custom CSS Box provided through the Customizer Options to solve the first issue:-

    #content {
      padding-top: 90px;
      margin-bottom: 50px;
    }

    For the second issue, paste this CSS code and see if it helps:-

    @media screen and (max-width: 768px) {
      .site-content .inner-wrap {
        width: 100%;
      }
    }

    And for the third issue, it requires lots of code customization work, which we could not cover through this forum. Hope you can understand.
    Thanks.

    #1238495

    André
    Participant

    Hello,

    1. The first issue did not work. It was not what I meant. Maybe my mistake. I mean it like this (see link):

    https://i66.tinypic.com/14ce2j4.jpg

    2. Unfortunately this also did not work. I have more code is the css box now. Maybe some things are not working together? This is my code:

    p {
    font-size: 110%;
    }

    p {
    line-height: 2.0;
    }

    p {
    font-weight: 400;
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: oswald;
    font-weight: 700;
    }

    .entry-content ul li{ font-weight: 400; }

    #primary {
    width: 67%;
    }

    ul li {
    line-height: 2.0;
    }

    .hentry {
    padding-left: 9rem;
    padding-right: 9rem;
    }

    @media screen and (max-width: 768px) {
    #primary {
    width: 100%;
    }

    .hentry {
    padding-left: 2rem;
    padding-right: 2rem;
    }
    }

    h2 {
    line-height: 1.5 ;
    }

    h3 {
    line-height: 2.0;
    }

    h4 {
    line-height: 2.0;
    }

    .entry-content ul li{ font-size: 110%;
    }

    h1.site-title {
    font-size: 33px;
    }

    3. I fully understand. I thougth that maybe it was a simple thing. No worries.

    #1238979

    Bipin Singh
    Moderator

    Hi

    1) Thanks for making it clear 🙂
    Here you go:

    .hentry {
        padding-top: 1rem;
    }

    2) I see full width in single page too, can you explain your query in more detail.

    Thank you.
    ThemeGrill Support Team

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.