• Hello,
    I’ve searched and read a lot on the forum, but hope someone will give me some easy ”to do” steps.
    I learned a lot but still am not good in all the css codes….sorry

    Question is simple:
    My website pages are TOO NARROW.
    I cannot even fit a normal sentence on one line. It looks bad too and really wish to make the pages wider.

    My site is:

    Please help.
    I use Asteria Lite theme if that is important to know.

    Thank you so much

Viewing 15 replies - 1 through 15 (of 20 total)
  • Jason King

    (@jasoncharlesstuartking)

    Confused. Your site looks nothing like the Asteria Lite theme. Have you modified it extensively? Or is this a really old version of the theme?

    https://wordpress.org/themes/asteria-lite/

    Suggest you direct your question to their support forum at http://www.towfiqi.com/forums/forum/free-theme-support/asteria-lite

    Hannah S.L.

    (@fernashes)

    Automattic Happiness Engineer

    Hi!

    Your site looks good and I’m not sure where the issue is. Could you please give us a specific link where you’re having trouble?

    Thanks!

    Thread Starter rsmets

    (@rsmets)

    Thank you both,
    I prefer that you guys here help me as I know YOU know what to do….

    Even if it ”looks” ok (thank you Hannah), I really really want the pages to be wider.
    So that I can put much more text on one line.

    @jason: it’s not even a year old, but it is Asteria lite, but again, I rather have you explain what I can do. It is not an Asteria issue.

    Please let me know. I appreciate your help.

    Jason King

    (@jasoncharlesstuartking)

    You’re asking for advice on customising a specific theme. If you’re using Asteria Lite, their support forum is the best place to go first for that advice.

    The next best place to go is the theming/templates forum here – https://wordpress.org/support/forum/themes-and-templates

    Like Hannah asked, can you give us a specific url where you’re having this problem? I looked at a few pages and couldn’t see any problem with the length of text.

    Also, if something gets wider, another part of the page needs to get narrower or disappear – so describe in more detail what you’re trying to achieve.

    Thread Starter rsmets

    (@rsmets)

    Thank you Jason

    The reason I ask you here, is that I’ve seen other posts similar
    and they have received help with the ”editor” section in wordpress.
    but as I’m not so experienced, I ‘m asking a simple explanation (if you can).

    I do absolutely understand and allow the side bar to be narrower.
    I would love for the page (content part) to be wider and the side bar (with widgets) to be smaller.

    Please tell me how.
    here is a url for you:

    Thread Starter rsmets

    (@rsmets)

    I’m not sure the URL came on right…
    Here again:

    Thread Starter rsmets

    (@rsmets)

    Jason King

    (@jasoncharlesstuartking)

    You need to edit the CSS code. In the theme’s style.css file you’ll find these two styles. Change the percentages, should work:

    on line 464:

    #sidebar {
        width: <strong>30%</strong>;
    }

    on line 456:

    .single_wrap {
        width: <strong>68%</strong>;
    }

    Thread Starter rsmets

    (@rsmets)

    Jason,
    I found it!
    But before doing anything, can You please tell me if I should change both similarly
    so, if I make the sidebar 20%
    I should make the other 78%?

    Or what is your suggestion?

    Will this change ALL my pages?

    Thanks!!!

    Thread Starter rsmets

    (@rsmets)

    PS: I did the above but see no difference…

    Hannah S.L.

    (@fernashes)

    Automattic Happiness Engineer

    Hi Rsmets,

    I’ve taken a look and it looks like you’ve gone from a fixed width site (i.e. 800 px wide) to something that resizes as you make the browser window smaller or wider.

    My suggestion would be not to make the main content wider but to use a smaller text. For example “1. Plan your move” is set as an H2 but has extra formatting to raise it to 1.5 em. That’s really, really big for most websites. The default H2 formatting for your site is 28 px, which looks quite nice.

    The same thing goes for the paragraph of text starting with “Through planning and preparation” – the size has been raised to 22 px – almost as big as the H2.

    To achieve this, go into your page or post (example: http://expattoinpat.com/?page_id=115) and remove the formatting. Then take a look and see how it looks. You can always select things later and mark them back up to give the page structure with headers, i.e h2, h3, etc.

    Please do let me know if this helps you out!

    Jason King

    (@jasoncharlesstuartking)

    I can see the change, but obviously it’s slight, from 30% to 20%. And I’m not convinced it’s a sensible change, because your videos barely fit in such a slim sidebar.

    Reducing the size of text (as per Hannah’s suggestions) makes more sense.

    The more I look at the original theme, the more I wonder why you changed the font, sizes and colours of text, which were fine already.

    Once you reduce font sizes, legibility should be your next concern – page titles are almost illegible, so put them back to white.

    I looked at your code and see lots of inline styles, such as –
    <strong style="color: #c97112; font-family: verdana; font-size: 20px; line-height: 1.5em;">

    You will struggle to style this website nicely using CSS properly (in the way Hannah is talking about) unless you strip all of those out. Your CSS should all be in style.css instead. It might be easier to revert to the original theme than to get rid of the inline styles, depending on how many changes you’ve made.

    Thread Starter rsmets

    (@rsmets)

    Oh Hannah,
    You are TOTALLY coming to the point of my frustration since months now!
    If you can continue and help me with that, you would be my Angel πŸ™‚

    I have learned about HTML myself and obviously constructed the site myself.
    so, I do type in the font of e.g. 22, but then BOOM, suddenly it adds (by itself) this ”1.5em”….and I have NO clue what that is, but it messes all up!!!!
    I hate it πŸ™‚

    so…I have no idea how to make it all look consistently and am so afraid to change one thing as then it all jumps around.

    Why is it doing this and why is that span coming in automatically….
    Im losing a bit hope though…

    Thread Starter rsmets

    (@rsmets)

    HI Jason,
    I didn’t read your post before writing my answer.
    YOu are right too, but I still am lost here…as I tried filling all the html codes and don’t know EXACTLY what to delete or where….
    it took me weeks on end to build this…

    First of all:
    About the 20-30%, should I change it back to 30-68 as it was? Or leave it?

    Second:
    where do you mean the ”white” color?

    Third:
    About the font size…I”m struggling a lot.
    How can I make it look nice ALL over the pages…where is the first place to check and what?
    If I go to each page, I start messing again…

    Thanks so much

    Jason King

    (@jasoncharlesstuartking)

    In the Asteria Lite theme you’re using, as in all properly coded themes, the styling goes into a stylesheet, for example style.css.

    Usually no styling goes in the html. All fonts, colours, bold etc go in the CSS file, not the HTML files.

    You seem to be adding what’s called “inline” styles, in other words typing it into the html files. Is that right? If so, you’re doing two things:

    – writing way more code than you need to (100s of times rather than just once)
    – making it more and more difficult to make further changes

    I recommend reverting to the original theme, then making a few changes to style.css. If you do it right, it won’t be weeks of work and it could be just a few dozen changes required.

    But you’re going to have to figure out how CSS works. If you’re customising an existing theme, that’s not hard to do – but some relearning of skills is involved.

    This might help – https://codex.wordpress.org/Finding_Your_CSS_Styles

    Before you consider doing that, you should know what a child theme is. If you work on a child theme you don’t damage the original theme and can easily revert your changes. See http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial and note what it says near the end about a plugin that can do this for you.

    Let us know how you get on.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘How to make pages WIDE in simple steps?’ is closed to new replies.