[markmoritz]

Hi I’m trying to have my website home page basically be content free with the exception of a full screen video that is run in the background by a separate WP plugin and have nothing more than a menu and footer otherwise.
I am confused as to when you have it set to a static page, you have to enter two pages in the dropdowns.
All I want is a homepage. No posts, comments, etc and no scrolling in the page. Just a single page that fluidly fits and is responsive full screen to all screen sizes. Is there a way to do this?

[markmoritz]

Website is http://www.purpleceiling.com

[Skandha]

@markmoritz: I checked your site it seems to be showing exactly the way you want it to. To adjust the footer
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#colophon {
	position:fixed;
	bottom:40px;
	left:0;
	width:100%;
        background:#00;
}

Let me know if this helps you out!
Kind Regards,
Skandha

[markmoritz]

it’s not. That problem is actually that the menu, when clicked to open, is basically on a separate page and opens with a really small scroll bar. So it’s two pages sort of smashed into one. The page with the video, and the actual homepage. I just want one single full screen fluid layout page with the menu, video, footer, and logo. That’s it!

[markmoritz]

Please advise on how to do this. I really just need one page. I don’t know why it makes me put two pages in for a static page. This should be pretty simple. I don’t need any content on the page. Maybe just a transparent space filler but the video is the actual background for the page and that’s really all I need. But any adjustments I’ve tried making don’t seem to work properly and if they do on my desktop they end up off on the smaller devices. Please help!

[Sakin]

@markmoritz: The main problem I see is the plugin that you are using in not compatible with the theme. I check in your site and see that you just need that video, menu and footer in homepage and you don’t want to select two pages in for a static page.

So, please follow these steps:
1. Disable that plugin, as you have add video from Header Media. So, just go to “Appearance => Customize => Header Media” and paste that youtube video URL in the box “Or, enter a YouTube URL:”
2. To remove recent post from homepage. Just go to “Appearance => Customize => Theme Options => Homepage / Frontpage Options” and check the option “Check to disable Recent Posts/Content on homepage”

This should solve your issue.

[markmoritz]

the problem with doing that is that there is no audio option through the Header Media. That is something that I need to have the option of

[Sakin]

@markmoritz: Ok then add the following css in “Appearance => Customize => Additional CSS” box:

.home #page {
    height: 100%;
    height: 100vh;
}

[markmoritz]

that looks great. Thank you.
What is the best way to put the logo in the top left of the screen and have it then be fluid and in the same place across all devices?

[Sakin]

@markmoritz: have you added custom css in “Appearance => Customize => Additional CSS”

.custom-logo {
    display: block;
    max-width: 600px;
}

It’s because of the above css it’s not fluid. So, you can remove that css with the following one:

.custom-logo {
    max-width: 200px;
}
@media screen and (min-width: 30em) {
	.custom-logo {
	    max-width: 300px;
	}
}
@media screen and (min-width: 40em) {
	.custom-logo {
	    max-width: 400px;
	}
}
@media screen and (min-width: 48em) {
	.custom-logo {
	    max-width: 500px;
	}
}
@media screen and (min-width: 64em) {
	.custom-logo {
	    max-width: 600px;
	}
}

[markmoritz]

That worked great for the logo but it seems to have then thrown off the other elements that i had added already in additional CSS when it comes to fluid responsiveness.
The home page on a desktop is pretty spot-on to how I want it to look. The problem right now is that it is not fluid across smaller devices. The controls for the video are moving/disappearing. The menu dropdown is separating from the menu, etc.
Uniformity across the board is key for my site. Can you please advise on how to get it all fully fluid?

This is everything currently in my additional CSS:
.home #page {
height: 100%;
height: 100vh;
background: transparent;
}

.custom-logo {
max-width: 200px;
}

@media screen and (min-width: 30em) {
.custom-logo {
max-width: 300px;
}
}

@media screen and (min-width: 40em) {
.custom-logo {
max-width: 400px;
}
}

@media screen and (min-width: 48em) {
.custom-logo {
max-width: 500px;
}
}

@media screen and (min-width: 64em) {
.custom-logo {
max-width: 600px;
}

.home #page {
height: 100%;
height: 100vh;
}

#colophon {
position:fixed;
bottom:0;
left:0;
width:100%;

}

.mb_YTPBar .mb_YTPProgress {
height: 0px;
width: 0px;
background: transparent;
bottom: 0;
left: 0;
}

.mb_YTPBar .simpleSlider {
position: relative;
width: 0px;
height: 0px;
overflow: hidden;
margin-right: 0px;
border-radius: 0px;
display: none;
}

.mb_YTPBar .mb_YTPTime {
width: 0px;
display: none;
}

.mb_YTPBar .mb_YTPUrl.ytpicon {
font-size: 0px;
display: none;
color: transparent;
}

.mb_YTPBar .buttonBar {
left: 600px;
width: 100%;
}

.mb_YTPBar span {
display: inline;
}

.mb_YTPBar .ytpicon {
font-size: 70px;
}

.mb_YTPBar .buttonBar {
color: #3c024f;
}

.mb_YTPBar {
transition: opacity .5s;
display: block;
height: 25px;
background: none;
position: fixed;
bottom: 80px;
left: 420px;
text-align: left;
z-index: 1000;
color: #fff0;
opacity: 1;
}

.mb_YTPBar .buttonBar {
transition: all .5s;
background: none;
background-color: transparent;
position: absolute;
top: 0px;
height: 0px;
padding: 0px;
}

.site-header-main .wrapper {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: flex-start;
display: -webkit-flex;
display: -ms-flexbox;
/* display: contents; */
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: inherit;
position: relative;
}

embed, iframe, object, video {
max-width: 100%;
margin-top: -580px;
}

.is-open .menu-inside-wrapper {
visibility: visible;
opacity: .95;
}

.menu-inside-wrapper {
width: 238px;
top: 100%;
right: 0;
opacity: 0;
}

.menu-inside-wrapper {
width: 240px;
top: 17%;
}

.is-open .menu-inside-wrapper {
right: -11.5%;
}

.site-header-menu .menu-label {
display: contents;
}

.site-title a, .site-title a:hover, .site-title a:focus, .site-description, .main-navigation a, .menu-toggle, .dropdown-toggle, .site-header-cart .cart-contents, .site-header-menu .social-navigation a {
color: #b14fd4;
}

.wrapper {
margin: 15px auto;
max-width: 1500px;
}

html {
margin-top: 0px !important;
}

[Sakin]

@markmoritz: There is missing closing bracket after the css. Check the following css:

@media screen and (min-width: 64em) {
	.custom-logo {
	    max-width: 600px;
	}

It should be as below:

@media screen and (min-width: 64em) {
	.custom-logo {
	    max-width: 600px;
	}
}

[markmoritz]

Thank you that worked for the logo section but the other sections are still off when viewing on the various devices. Can you please advise how to correct that? As I said, on the desktop, it all looks as it should

[markmoritz]

Is there a code or a way to control the individual device layouts independently of one another? Meaning, if i want the menu to look one way on a desktop, but then reposition it or adjust any parameters for it’s layout on a smartphone, how can I do this?
Currently, on my iphone, if i tap anywhere on the background video, without even having the menu open, it is blindly functioning as if the menu IS open and taking me to random pages throughout my site. So the menu is not functioning correctly throughout the different devices. The submenu is detaching. It’s all kind of weird.
However, I am planning a major launch of my new site this week and really now have an urgent need to finalize the cleanup on all of the elements in it. I am limited in my CSS knowledge but basically, just want a way, even if it takes me manually building the site with Additional CSS for each device, I just don’t know how to manually and independently specify what device I want certain css info to apply to. Can you please help? Thank you

[markmoritz]

also, last thing (i think) is best way to reposition where the logo appears? It is currently showing in left middle portion of the top of the screen. I would like to move it over to the top left corner. Thank you in advance for your help

[Sakin]

@markmoritz: You have lot of custom css in “Additional CSS” box and it’s really difficult for us to debug it. So, can you clean up your Additional CSS and then add only the css that is necessary for customization. There are so many confusion custom css.
So, I think it’s better for you to hire customizer. We can just help you with css which is easy one to fix it.

[markmoritz]

That’s fine I can figure most of it out. Can you please go ahead as agreed in one of my threads refund the purchase of the Adonis Pro theme to the card it was issued from or I can give a different card if need be as that theme did not suit my needs and then purchased the audioman pro in its place. Thank you

[Sakin]

@markmoritz: Yes sure, we can refund your purchase of Adonis Pro as you are using Audioman Pro. So, please contact our sales at https://catchthemes.com/contact-us/ and your refund will be processed.

[markmoritz]

hi guys. So I have most of my issues on the site worked out except for a couple of critical questions.
I am trying to use the Header Media section to basically overlay my logo on the site, but want it in the top left area of the screen. It’s a PNG file with transparency on. When I am putting it in the header media section it seems to be doubling up. Like there are two logo’s slightly offset. That’s problem #1. Problem #2 is that how can i resize the logo so that it is not completely covering the screen? I do not want it blocking the entire background video. Right now, when i tried fiddling with it, it seems to be adjusting the box size that the logo is wrapped in, thus making the overall presence of it smaller but doing so by cutting off the actual logo.
Really, all i want is to be able to place the logo wherever i need it and have the size be adjustable. It’s close to working but the size option is what I can’t seem to get working. Can you please help? Thank you

[markmoritz]

Can you please advise as why, when uploading a Header Media Image, it is actually showing two, slightly offset copies of the image? Even if I try to scale it using a Transform CSS, I can make ONE of the images smaller but the other still remains.

[Author]

Posts