Links and Text in the footer

Hi,
Thanks for the login, but It doesn’t seem to be an admin account, as I can’t view your theme settings. Please change to admin.
For number 1, please add [nolink] to the end of your copyright info.
For number 2, once we have admin access we will be able to assist.

Best regards,
Mike

Hi,
1: There must have been some mis-understanding, the [nolink] only removes “Enfold Theme by Kriesi” when added to the end of your copyright info, I did this for you and now only your copyright shows.

2: The “#0 (no title) #0 (no title)” was your footer menu, I removed the items for you and now they don’t show.

Best regards,
Mike

Hi,
Glad to help, is there anything else we can assist with on this, or shall we close this?

Best regards,
Mike

Hi,
The best solution to have a great visitor experience with the layerslider is to create a mobile only version of your slider. Placing the new slider under your current one on the page and using css to hide one or the other depending on the screen size, such as the code below, which will only work if you have two sliders on one page.
We will be happy to show you how this works if you first create a duplicate slider resized for mobile view.

@media only screen and (max-width: 767px) {
div#layer_slider_1 {
display:none!important;
}
}

@media only screen and (min-width: 768px) {
div#layer_slider_2 {
display:none!important;
}
}

Best regards,
Mike

Hi,
I changed the settings for the mobile layerslider so the canvas is 767px, this will be our max-width:

Now when you look at the editing screen you can see what it will look like as mobile, just stay within 425px for phones.

I also created a test page to view the slider, see Private Content area.
So, try to change the width of the text and button to match your image above for screen width 425px.
I see you have a color section under your layer slider, this is the one that is distorted. I guess we will be replacing it with the new mobile layerslider?

Best regards,
Mike

Hi,
Thanks for the information, I now believe that you have created the color section for mobile screens, and wish to have a full screen image for mobile devices. So lets try to see what we can do with this first.
I modified your code to this:

@media only screen and (max-width: 989px) {
  #custom-section {
    background-size: cover !important;
  }
}
@media only screen and (max-width: 767px) {
div#layer_slider_1 {
display:none!important;
}
}

This hides your original layout for mobile screen sizes, and changes the background image of your color section to: “cover”, which will “cover” your screen.
Please see screenshot in Private Content area. This is what I see in mobile.
The only limitation here is that if you want to show the image full width, you will need a longer image.
But please clear your browser cache and check the as is size, I think it looks good.

Best regards,
Mike

Hi,
1: I tested on my Android and I couldn’t reproduce the resizing of the image, although it looks like we are both using mobile Chrome? I also tested in my desktop Chrome developer tools as mobile, which has been reliable. Please see video in the Private Content area. Are you using a iPhone?

2: To center everything I added the class “mobile-home” to your special heading and added this css code in the General Styling > Quick CSS field:

.mobile-home {text-align: center;}

please clear your browser cache and check.

3: To make your mobile header transparent, and enable your alternative logo, I added this code in the General Styling > Quick CSS field:

@media only screen and (max-width: 766px) { 
.responsive #top #main {margin-top: -80px!important;}
#top #wrap_all .av_header_transparency {background-color: transparent!important;}
div#header_main > .container {display: block !important;}
.responsive #top .av_header_transparency .logo img.alternate{display:block!important; }
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    opacity: 0!important; 
}
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
The error is in the code I gave you, on this line:

.responsive #top #main {margin-top: -80px!important;}

try changing it to any negative number down to 0px, the closer to 0px the more space there will be at the top of the page. I thought -40px looked good, but I’ll let you judge :)

Best regards,
Mike

Hi,
Well it seems the only page that has the issue is the homepage because of the transparent header, so let’s add this code to the end of your css, or at least after the other code:

@media only screen and (max-width: 766px) { 
.responsive #top.home #main {margin-top: -80px!important;}
}

It will only work on the homepage.

Best regards,
Mike

Hi,

Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks! We’ll close this thread now.

Best regards,
Ismael