[Sakin]

@markmoritz: I am totally confused with what are you trying to do it. So, first can you let me know what are you trying to achieve it. Maybe show me your design screenshot and then I can compare with your site URL to check in.

[markmoritz]

Basically I am very close to having it all look exactly as I want it. I have posted a jpg with the elements described here:
https://ibb.co/mf3nTA

All I am looking for is having the page be a static page, no need for scrolling up & down, the logo in the top left corner at an ample size as it appears in the url image above. The menu. The player controls centered above the footer, and the footer as it is. That is it.

I have cleaned up a lot of the additional CSS stuff. Really I just need it all to be responsive and uniform throughout the various device displays. Currently, I have it set to look right on my 32″ UHD monitor, but when i look at it on my 17″ UHD laptop monitor, it doesn’t look the same.

Just need uniformity throughout the displays. The design is simple and pretty much laid out already

[Sakin]

@markmoritz: There is main problem in your site. You said you want logo in header top left for that you need to add logo from “Appearance => Customize => Site Identity” and upload logo and not in “Appearance => Customize => Header Media”. So, remove that and place it in right place.

[markmoritz]

I tried doing that and can revert to that method for the logo however it is VERY small and also not left enough. The logo needs to be larger and in top left all the way to the left and that and all other elements need to maintain correct position and sizing fluidly throughout different device and screen sizes.
Right now, when I get it looking correct on one screen, it looks totally off on all others

[Sakin]

@markmoritz: Which that it’s really difficult to change with custom css. Your logo it too big http://purpleceiling.com/wp-content/uploads/2018/10/cropped-betterLOGOv2-4.png. It’s 3728px width and 1922px height. This will hamper your site.

Then remove your custom css for header elements and to make your logo complete to left. You need to make your header wrapper 100%. So, add the following css:

.site-header-main .wrapper {
    max-width: 100%;
    padding: 0;
}

.site-branding {
    margin-top: 0;
    margin-left: 0;
}

#site-header-menu {
    position: absolute;
    width: 281px;
    text-align: left;
    right: 50px;
    top: 20px;
}

After this, you need to decide the width of the logo in different devices or you can adjust with percentage.

[Author]

Posts