Responsive logo and video

Dear Team,

I work with an iMac 17’ and when I open my website (www.wild-confetti.com) I see it perfectly.

But if I open the website with the laptop, the logo is on the left side and cropped.

The same happens when I open the web on the iPad or mobile phone, and additionally the video doesn’t show.

Is there any CSS code I can apply to help with this issues?

Thanks again!

Teresa

Dear Teresa,

What will happen if you remove the following custom CSS code you applied?


.site-logo {
   margin-left: -250px;
   margin-top: 150px;
}

For device compatibility reason, the video background won’t work on some mobile browsers. Alternatively, it should have displayed an image instead of video. It seems like you are using a plugin to make a video background. I would recommend you to contact the plugin support.

Regards,
Kharis

Dear Kharis,

Thanks! I’ve removed the CSS code and the logo shows up properly (not cropped) on both ‘problematical’ devices (mobile phone and tablet).

Now there are other issues that maybe you can help to solve:

  1. Mobile device: a) logo appears very small, and in the center of the image b) white menu bars appears, is it possible to make them disappear? Or at least, get them out of the middle center of the image and bring them to the left or right side? c) when I scroll up the logo disappear, instead of remaining smaller and on the left side as when you see it in the computer browser. d) the text container and text don’t fit on the window.

  2. Tablet device (iPad), the logo and white menu bars appear too big almost in the middle of the image, is it possible to make the white menu bars disappear and the logo appearance smaller? On scrolling down, the logo disappears instead of remaining smaller and on the left side of the screen. Can this be fixed?

Thanks again for all your help!

Teresa

Dear Teresa,

Regarding your new queries, I thought it would be better if we could address them one by one.

> 1

Try adding the following custom CSS please:


@media only screen and (max-width:1024px){
  
  
  .site-header.fixed{
    position: fixed !important;
  }
  
  .site-logo{ /* Logo size */
    max-height: auto !important;
    max-width: 60% !important;
  }
  
  .site-header .col-md-4{
    text-align: left;
    width: 66.66666667% !important;
  }
    
  .site-header .col-md-8{
    left: auto;
    right: 0;
    top: 15px;
  }
  
  .btn-menu{
    float: right;
    margin-right: 15px;
  }
  
}

@media only screen and (max-width:600px){
  
  .site-header .col-md-4{
    width: 100% !important;
  }  
  
}

@media only screen and (max-width:479px){

  .site-logo{ /* Logo size */
    max-width: 70% !important;
  }  
  
}  

> d) the text container and text don’t fit on the window.

I can’t get the point clearly, sorry :frowning:

Could you please take a screenshot of it? Upload the image to the file hosting service like Google Drive, Dropbox, or cloudup.com, then share its link here.

Regards,
Kharis

Dear Kharis,

Thanks for your reply. I’ll try the CSS code you suggest.

I am sorry my English is a bit rusty lately. Please find the link below:

https://dl.dropboxusercontent.com/u/20978815/thumb_IMG_8278_1024.jpg
https://dl.dropboxusercontent.com/u/20978815/thumb_IMG_8279_1024.jpg

Regards,

Teresa

Dear Teresa,

Thank you for the screenshots. What is the issue you are having there? Could you please be more specific? Maybe adding some annotations would help me.

Regards,
Kharis

Hello again! I send you another link, I think it will help:

https://dl.dropboxusercontent.com/u/20978815/Kharis%20doc.pdf

Please let me know if not.

Thanks for your time, Teresa

Hi Kharis,

Did you receive the link to the document?

Thanks, Teresa

Dear Teresa,

I would like to apologize in advance for the delay.

Try adding the following CSS code and do adjustment necessarily:


@media only screen and (max-width:767px){

  .home .hentry .title-post{
    font-size: 2.5vh;
  }

  .home .hentry h3,
  .home .hentry h4{
    font-size: 2.8vh;
  }

  .home .entry-header{
    margin-bottom: 0;
  }

  .home .page-wrap .content-wrapper{
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 0;
  }

  .home .hentry{
    padding-bottom: 0;
  }
  
}

Regards,
Kharis

Great help, as always :slight_smile: Thanks!