In your custom CSS plugin, you’ve got this CSS:
#page{display:none !important}
which is hiding pretty much everything on the page except for the header image and the social icons. Deleting that line will get your content back, and it will be responsive, as well.
Okay thank you!!
Is there any other CSS to use to still achieve what I wanted but keeping it responsive?
I only want the header image showing on the page with contact/social icon. No navigation menu or content below.
Sorry, I think I misunderstood what you were trying to do. IMO, what you have now looks okay on mobile: you have your logo taking up the majority of the browser window and then if you scroll down, you see the social icons. Can you clarify what you’re trying to do?
The header image does not shrink to fit the mobile version but it just cuts it off compared to the desktop version
For the social icons, I would like to get them spread out horizontally on the top of the page and in the center for both the mobile and desktop version.
Currently the page does not mimic itself when I go from desktop to mobile. Hope this clarifies!
Try this custom CSS to move the social icons to the top of the page:
body:not(.blog) #social-icons {
width: 100%;
position: absolute;
top: 0;
}
As for the social icons themselves, are you trying to make them spread out over the entire page, even though that looks kinda goofy (IMO) on larger screens?
And this custom CSS for the header image:
div.header-image {
background-size: 100% 100%;
}
The problem with the header image, though, is that the image itself has a lot of white space on the sides of the logo, so even though the header image takes up 100% of the browser window, it still looks cramped because of the white space on the sides. If you were to upload a new version of the header image with no white space on the sides, it would look a lot better (IMO).
The CSS provided has fixed my issues and it looks great!
Thank you.
