Docs

[eventsbymikey]

Hi Happy Holidays,

I have some issues i would like some help with. These issues are kinda hard to describe, all header issues. Thanks The link is http://www.eventsbymikey.com

1 – My logo Text size is 45px on desktop version, but looks bad on mobile version. Mobile logo text should be 30px. How can i keep logo text on desktop version at 45px and mobile version at 30px?

2 – How can i keep Desktop & Mobile versions seperate? If i change one, the other looks bad. What i’m trying to do is listed below.

Desktop Version – P: 845.590.1653 | E: [email protected] shown above Menu. NO BUTTONS showing!
Mobile version – Only buttons shown above Menu. P: 845.590.1653 | E: [email protected] is NOT too be SHOWN.

3 – Can’t edit picture size under main menu. Can’t figure out how to make picture bigger in mobile version. would like image 325px (width) x 350px (height)

[eventsbymikey]

Help! Thanks

[Friech]

Hi There,

Thanks for writing in! #1 You can add this under Custom > CSS in the Customizer.

@media (max-width:  480px) {
	.x-brand.text {
		font-size: 30px;
	}
}

#2 Please update your topbar content to this:

<div class="cs-hide-xl cs-hide-lg cs-hide-md">
<a href="tel:8455901653"><img src="https://s30.postimg.org/69uzefllt/call_us.jpg"></a>
<a href="mailto: [email protected]"> <img src="https://s27.postimg.org/so4ofjj8j/email_us.jpg"></a>
</div>
<div class="cs-hide-sm cs-hide-xs">
<span style="font-size:16px;"><span style="font-family:tahoma,geneva,sans-serif;"><strong>P: 845.590.1653 |&nbsp;E: [email protected]</strong></span></span>
</div>

#3 Add this on your custom CSS.

body.dslc-res-phone #dslc-module-197 .dslc-image {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

Hope it helps, Cheers!

[eventsbymikey]

Thanks for your help, still have some issues, i tried what you gave me, still having some problems. http://www.eventsbymikey.com

1 – The Mobile header is still showing “P: 845.590.1653 | E: [email protected]”, i would only like that to show on the Desktop version only. Just the “Call us and Email us” button to be seen on the mobile version only. “P: 845.590.1653 | E: [email protected]” is to be only shown on Desktop version.

2 – The Desktop version header is still showing “Call us and Email us” buttons, i would only like “P: 845.590.1653 | E: [email protected]” to be seen on the Desktop version header. “Call us and Email us” buttons only shown on mobile version.

3 – I would like to make the image below the menu to fill down to the black line.

[Rad]

Hi there,

1. Please add this CSS as well

@media ( max-width: 767px ) {
.x-topbar .cs-hide-sm {
display: none !important;
}
}

2. And this as well

@media ( min-width: 768px ) {
.x-topbar .cs-hide-xl {
display: none !important;
}
}

3. And this as well,

.dslc-separator.dslc-separator-style-solid {
    border-bottom: 0px;
}

Hope this helps.

[eventsbymikey]

That worked, just acouple more issues. Thanks Rad & Friech, You guys are awesome!

1 – How can i move the “Email us” button to the right. put some space in between “Call us” and Email Us”?

2- How can i change the px size of the social icons on the mobile version?

[Rupok]

Hi there,

Thanks for writing back.

You need to add an extra class (say call-email) to the div that containing the buttons. Then you can add the below code :

@media ( max-width: 767px ) {
.x-topbar-inner .call-email > a:last-child {
  margin-left: 50px;
}
.x-topbar .x-social-global a {
  font-size: 25px;
}
}

The second block is to change the social icon size. You can adjust this if needed.

Cheers!

[eventsbymikey]

Hi, acouple questions. sorry, i’m clueless about coding. http://www.eventsbymikey.com Thanks

1 – What do i put to make a new extra class? how should the code look? I tried making new div with Call-email, Please see Rupok’s message

2 – How can i make the logo on the mobile version “stacked”? Can you add Logo size, make it centered, and can u add top and bottom padding to the coding, so i can edit it? I would only like “stacked” on the mobile site only Thanks

[eventsbymikey]

3 – Can you Center the menu icon and put 10px top and bottom padding

4 – Can you put “Menu” to the right of the Menu icon? Thanks

[Christopher]

Hi there,

#1 I don’t find “Email us” button on home page.

#2,3 & 4 Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:979px){
a.x-brand.text {
    width: 100%;
    float: none;
    text-align: center;
    padding: 10px 0;
}
a.x-btn-navbar {
    margin: 0 auto;
    float: none !important;
    display: table !important;
    margin-bottom: 14px;
}
a.x-btn-navbar:after {
    content: " Menu";
}
}

Hope it helps.

[Author]

Posts