Widgets/Sections Not Aligning With Header

  • Resolved jackiedew

    (@jackiedew)


    7 years, 9 months ago

    Hello WordPress world!

    I am a WordPress n00b currently creating my website via Elementor, and I am finding that my background and sections are no longer aligning with my header.

    Everything worked perfectly on the first two pages I designed (“Home” and “Contact”), however on the pages I have started working on afterward, everything is shifted to the right. I have checked my settings on the dashboard/WordPress side of things, and they seem to match the other pages that are working correctly.

    Any help would be appreciated!

    The page I need help with: [log in to see the link]

Viewing 15 replies - 31 through 45 (of 59 total)
1 2 3 4
  • LesTexas60

    (@lestexas60)

    7 years, 9 months ago

    This is really strange Logo, my display does not show the lower part of the page where it says Dancer. I can not scroll down and see anything past the “Enter Site”.
    ctrl + and _ do not work on this site. This happens in FireFox but not Chrome or Edge.
    This only happens on jackiedew.com, not the other pages, they work normally.
    Using the crtl+ and – on jackiedew.com does modify the enter site box but the background does not change size, that is why I can not see the wording at the bottom of the page.
    Logo and Jackie, try Firefox on your computers and see if you get the same effect.

    • This reply was modified 7 years, 9 months ago by LesTexas60.
    Thread Starter jackiedew

    (@jackiedew)

    7 years, 9 months ago

    Hi Guys,

    Sorry, I haven’t been able to fiddle around with this until this evening.

    1) Permalinks was my fault. (Long story short, for the Udemy course, I was originally just using desktop, localhost WordPress. Then I completely restarted on HostGator + an actual domain, after having trouble migrating, and skipped that step). That should be resolved now. Thanks for reminding me about that. 😛

    2) I’m aware of SSL, and think that is coming later in the Udemy course (but I wanted to focus on fixing these aesthetic issues first before I kept going. Again, the prof isn’t terribly responsive, which is why I’m asking here versus there). But I do know what that is- Just trying to take this one step at a time.

    3) I am totally aware the landing page looks different on every browser. I couldn’t figure out how to get the “Enter Site” to stay locked in the same place on every browser (I have both Mac and Windows systems, and spent a great deal of time frustrated because I couldn’t get it to lock in one particular place). So I gave up, and moved onto these other issues instead… :p Honestly, this website is more of a personal project rather than something I’m going to use for business purposes. Just trying to get enough experience from this process to tell people that I’ve “dabbled” in WordPress a bit (I have no aspiration to be a web designer/developer by any means).

    4) HEADER! I took a picture of my settings, and didn’t seem to be able to resolve the issue with the grey bottom. Am I looking in the correct place?
    https://ibb.co/jdROTo

    5) ALIGNMENT. I deleted the cache twice, and didn’t seem to have changed results after removing the Z-index value (I went and did this on the “Dancer” page too, just to keep that as an example).
    So I went and just deleted all of the sections to see if it would fix itself.

    1) https://ibb.co/e1fBET
    2) https://ibb.co/gwdL8o
    3) https://ibb.co/n0qBET
    4) https://ibb.co/cnZXM8

    :\

    Again, I really appreciate the time and effort you are both putting into helping me. Thank you SO much.

    LesTexas60

    (@lestexas60)

    7 years, 9 months ago

    Could you post the image of you climbing the wall? Not in the site but the original image.
    I’m trying to see if the right or left is cut off at all. I was thinking the background image was off center but now I’m wondering is it the transparent frame that goes over the image that is the issue.

    I can reduce the padding on the right and it doesn’t slide the image to the left, it just covers more of the background image.

    • This reply was modified 7 years, 9 months ago by LesTexas60.
    Thread Starter jackiedew

    (@jackiedew)

    7 years, 9 months ago

    Here you go :p
    https://ibb.co/eu2rW8

    LesTexas60

    (@lestexas60)

    7 years, 9 months ago

    It’s not the position of the background image. It’s the black border/column to the left of the image. It’s overlapping on the picture by about 30 Pix. Trying to use Inspector to see what that area is called. If I change the left margin to -5 the left side of the image lines up. Just curious why you used a footer widget to add a black box below the header. Couldn’t you have just put a black section in the header bottom rather than adding a separate section. If I change the margin settings it corrects the image alignment, but it changes all the margins in Inspector. If I could change the left & right margins only, I think this would fix it.

    • This reply was modified 7 years, 9 months ago by LesTexas60.
    Thread Starter jackiedew

    (@jackiedew)

    7 years, 9 months ago

    Oh my goodness. I’ve been trying to figure out what that black box has been for 4 days. Default setting within the theme it seems- And now it is gone. That’s why I was playing with the Z-index in the first place- I was hiding that footer!
    Thank you SO much for letting me know what that was. 😛

    LesTexas60

    (@lestexas60)

    7 years, 9 months ago

    I just moved the black column on the left over and the picture lines up now. It was a margin setting. Is there an email on your website? I’ve never posted images on this forum so I would have to send you an image.

    Thread Starter jackiedew

    (@jackiedew)

    7 years, 9 months ago

    Email button is in the top bar on the right.
    Thank you so much! 🙂

    LesTexas60

    (@lestexas60)

    7 years, 9 months ago

    See how, when you move the left margin back you see more bricks and even see part of the next concrete design window.

    I’ve got to go now. Maybe we can figure out how to over ride the auto left and right margins.

    • This reply was modified 7 years, 9 months ago by LesTexas60.
    Thread Starter jackiedew

    (@jackiedew)

    7 years, 9 months ago

    I’ll be honest, I can’t find that line in Inspector on my end.
    But thank you for figuring this out! 🙂
    I have to go as well, but I will look again and try to figure this out tomorrow night :p

    LogoLogics

    (@logologics)

    7 years, 9 months ago

    Logo and Jackie, try Firefox on your computers and see if you get the same effect.

    Looks the same and good in Firefox on my end…

    LesTexas60

    (@lestexas60)

    7 years, 9 months ago

    Hi Logo, My FireFox is where this first happened. I just tried this on a second computer and it also truncates the lower part of the screen. The Jackiedew.com page is the only one that does this. Size is locked down.

    • This reply was modified 7 years, 9 months ago by LesTexas60.
    LogoLogics

    (@logologics)

    7 years, 9 months ago

    4) HEADER! I took a picture of my settings, and didn’t seem to be able to resolve the issue with the grey bottom. Am I looking in the correct place?
    https://ibb.co/jdROTo

    That is the right place Ihad in mind.
    Honestly I do not see a greay bottom on your header?

    INDEX.PHP
    Great solved!

    • This reply was modified 7 years, 9 months ago by LogoLogics.
    LogoLogics

    (@logologics)

    7 years, 9 months ago

    5) ALIGNMENT. I deleted the cache twice, and didn’t seem to have changed results after removing the Z-index value (I went and did this on the “Dancer” page too, just to keep that as an example).
    So I went and just deleted all of the sections to see if it would fix itself.

    1) https://ibb.co/e1fBET
    2) https://ibb.co/gwdL8o
    3) https://ibb.co/n0qBET
    4) https://ibb.co/cnZXM8

    PS. If possible, please consider when adding links to screenshots or urls to make it openin another tab, so wecan switch fromul or screenshot without going away form our post and somteimes loose that?

    See what I meand please: https://www.screencast.com/t/BQ2K5GCscH

    LogoLogics

    (@logologics)

    7 years, 9 months ago

    Very strange you can get rid of that mis allignment even after the Z index.
    You must have set something wrong somewhere but where…?

Viewing 15 replies - 31 through 45 (of 59 total)
1 2 3 4

The topic ‘Widgets/Sections Not Aligning With Header’ is closed to new replies.