1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Increase the margin

Discussion in 'CSS' started by matt4, Aug 3, 2024.

  1. #1
    I'm using WordPress.

    I want to make the area that holds my content larger. As you can see it features just a small space and a lot of background.

    I've attached a picture as I probably haven't explained it too well. What can I do to extend it? Not sure what to edit.

    Screenshot from 2024-08-03 11-18-42.png

    Thank you,
     
    matt4, Aug 3, 2024 IP
  2. kennedygitahi

    kennedygitahi Active Member

    Messages:
    41
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    63
    Articles:
    2
    #2
    You will need to edit a theme file to increase that width if the theme does not already allow you to do that using its options.

    I have changed the width of the content area and nav on my local machine, as you can see in the image below. I can do the same on your website to make the changes permanent.

    You can PM me, and we can discuss how to make that happen.

    [​IMG]
     
    kennedygitahi, Aug 3, 2024 IP
  3. zaidzahid

    zaidzahid Active Member

    Messages:
    87
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    68
    #3
    you should add custom css like this
    .main-header-bar{
    background-size: 100%;}

    this is just increase your header bar

    In my opinion, the best solution is that,first inspect the header bar element to see how you want it

    adjusted. After make all adjustments copy css which you use and past it them into custom css and save it this is best and easy way to that.
     
    zaidzahid, Aug 3, 2024 IP
  4. GreenHost.Cloud

    GreenHost.Cloud Active Member

    Messages:
    366
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    73
    #4
    Please send the link, so we can guide you more easily using the Inspect Element feature.
     
    GreenHost.Cloud, Aug 5, 2024 IP
  5. matt4

    matt4 Well-Known Member

    Messages:
    191
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    128
    #5
    Hello,

    The link is matthewashley.co.uk
    Thank you for your help
     
    matt4, Aug 9, 2024 IP
  6. GreenHost.Cloud

    GreenHost.Cloud Active Member

    Messages:
    366
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    73
    #6
    First, you need to edit this file: publick_html/wp-content/themes/story/style.css. Locate the #content section and change `width: 1140px;` to `width: 1340px;`.
    Next, in the same file, find the #primary section and change `width: 820px;` to `width: 1020px;`.
    The result will resemble the attached image.
    [​IMG]
     
    GreenHost.Cloud, Aug 10, 2024 IP
  7. matt4

    matt4 Well-Known Member

    Messages:
    191
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    128
    #7
    Thank you,
    I made the change, however, its causing white space between my article images to show. Any idea?

    Screenshot from 2024-08-11 19-08-29.png
     
    matt4, Aug 11, 2024 IP
  8. Badrnya

    Badrnya Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    That's all correct, what you have done. What you need now is to set the width of the image inisde the class entry media to the same with 1020.
    upload_2024-8-20_14-6-51.png
     
    Badrnya, Aug 20, 2024 IP
  9. matt4

    matt4 Well-Known Member

    Messages:
    191
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    128
    #9
    Sorry, I have been unable to find this in my themes style.css

    I have tried searching for the class entry-media but there is no height/width to edit
     
    matt4, Aug 21, 2024 IP
  10. Badrnya

    Badrnya Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #11
    That should be a html file and not a css, so maybe check your html file and check if you could find the img tag and then change the width
     
    Badrnya, Aug 23, 2024 IP
  11. mayazir

    mayazir Member

    Messages:
    238
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    35
    #11
    you must make image width: 100%;

    However, I would like to recommend you try the Hueman Theme - it's free and very flexible, I use it on a few of my sites.
    You can choose there 1 or 2 sidebars.
    I don't know what is the latest version now, but the last one I used was v3.7.
    I still use it on MexicanRoutes(.com), FantasticRoutes(.com), and AncientMayanRuins(.com) - but I made a lot of modifications.
     
    mayazir, Dec 7, 2024 IP