• Hi,

    I’m currently trying to improve the layout of this page. I think it’s fairly obvious what I’d like to achieve – moving the copyright notice to the bottom of the page, stacking the contact form and “about text” properly.

    I’ve had a search for this and come up with the “vertical align” CSS function, I’ve tried it but it doesn’t seem to work and I think this is because each of the elements are classes?

    How should I be approaching aligning classes vertically?

    Thanks,

    Marello

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you tried clearing your copyright element?

    .CopyrightFooterNotice {
     clear: both;
    }

    No, that’s not quite how CSS works – the problem on that page is that the elements (HTML) aren’t structured the way you want them to be.

    How did you create that page? Is is a template from the theme or ??

    Thread Starter Marello

    (@marello)

    It’s a custom template that I made myself.

    Then you’ll need to sort out the HTML structure and then add CSS as appropriate – but you can’t only use CSS to position elements (well, you CAN technically, but it would be a horrible mess on a responsive site.) I was going to look at it again, but it looks like you changed it back to the theme page?

    Also, you really should be using a Child Theme to make these kinds of changes to the theme – otherwise all of your changes will be overwritten when the theme is updated – see:

    https://codex.www.ads-software.com/Child_Themes

    Thread Starter Marello

    (@marello)

    Hi Wpyogi,

    Thanks for the feedback. I’m not entirely sure how I go about sorting the HTML structure. It’s my first website.

    I made the decision not to use a Child Theme so I could customise further, I don’t intend to update.

    I decided to start moving the site from the test to final domain during the time this thread was running. Unfortunately now I’m in a bit of a pickle as I can’t log in and can’t see any of my files…sigh. That’s why you can’t see the site as it was before.

    If you don’t update, your site WILL break sooner or later as it will become incompatible with WP Core. Further, you might have security issues if you use an old version of WP or a theme. So that’s not a solution.

    A child theme does not restrict customizing any more than using the original theme.

    Sounds like now you may need to review: https://codex.www.ads-software.com/Moving_WordPress

    Thread Starter Marello

    (@marello)

    A child theme adds another level of hierarchy. As I still don’t actually know how to “sort the HTML structure” that’d ad an extra challenge into the mix, seeing as I only started learning 2 months ago.

    I made the conscious choice to do this as I expect the site to be replaced within 12 months. For now this arrangement is suitable for the end user and my learning. In time I can then look at moving it to a child theme.

    I’d be very grateful for some further description on what I should be searching with to “sort the HTML out”. Unfortunately as I’m so new I often come across a problem where I don’t know the terms I should be searching for to find guidance.

    Many thanks,

    Marello

    Unfortunately, I don’t think there’s a simple answer – in short it means learning a bit more about HTML and CSS – this site is a good reference site:

    https://www.w3schools.com/

    It’s also hard to be of much specific help without seeing the template you are using. I’m guessing that the copyright info should go in the footer.php file of the site. And the other elements can probably then be positioned using CSS. But you have some HTML errors that are likely problematic as well:

    https://validator.w3.org/check?uri=http%3A%2F%2Fdavid-howes.co.uk%2Fabout%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Thread Starter Marello

    (@marello)

    Thanks WPyogi, that validator link is very helpful.

    In terms of “learning a bit more” I’m the type of person that has to learn how to do relevant tasks as I go along. Could you direct me as to what type of topics I should be looking at in regards to this?

    Marello

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Any luck clearing the copyright element?

    Thread Starter Marello

    (@marello)

    Finally managed to restore my website back after pretty much deleting it (sigh).

    Andrew – clearing the element worked like a charm! Thank you so much!

    In an ideal world I’d like to put the captcha form underneath the photo of the man with a cat. I tried vertically aligning it to middle and also clearing it just in case but that didn’t seem to do anything. What should I be looking up to try and make that happen?

    FYI as the website has moved slightly, the page in question is here.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Vertically aligning classes?’ is closed to new replies.