Blog not appearing same both on desktop and mobile

Travelify
1

Hello All,

We have made our blog www.roadtotaste.com live today and we are experiencing some difficulties with it. The website is not appearing the same on both the mobile and laptop. We have used the travelify theme on our blog and have added some codes to the CSS

.header-image {
margin-top: -120px;
}
.social-icons {
float: right;
bottom: 40px;
position: relative;
right: 30px;
}

#main-nav ul li ul {
top: 33px;
}

@media (max-width: 767px){
#main-nav{
display: none;}
}

We are facing the following issues:

  1. The site header-image is appearing to be cropped from the top.
  2. There is a lot of gap between the header image and the slider.
  3. The excerpt text on the slider is missing on a handheld device.

Just to mention, we have tried to remove the following line from the header-extensions.php file but it did not help:

<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>

Please browse the website, both on laptop/desktop and a handheld device to notice the difference.
Please help us in resolving the issue at the earliest as the blog is live and it is impacting the traffic.

Regards,
RoadtoTaste

2

Can anyone please help with this issue?

Regards,
RoadtoTaste

3

Hi RoadtoTaste,

I hope you are well today and thank you for your question.

The theme is responsive and mobile optimized so it displays differently on mobile devices due to small mobile screen sizes. Find more information about it here Responsive web design - Wikipedia

We are facing the following issues:
  1. The site header-image is appearing to be cropped from the top.
  2. There is a lot of gap between the header image and the slider.

Are you facing the issue if you remove the whole custom CSS code from your site?

3) The excerpt text on the slider is missing on a handheld device.

This is default functionality of theme to hide this text on mobile devices as they overlap on slider image and hide whole image on mobile devices.

You can try displaying this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options

.featured-slider article.featured-text,
.featured-text .featured-title {
    display: block !important;
}

The above code will only display featured slider title but if you also want to display slider text then also use the below CSS code.

.featured-slider article.featured-text,
.featured-slider .featured-content {
    display: block !important;
}

Best Regards,
Movin