[mtusaParticipant]

Hi there,

I’ve noticed that certain elements on my site are not responsive when viewing on a mobile device ( for example, the Recent Projects gallery in the footer and any of the media grids like the one on the page for facades->reveal). They are all way too large when viewing on smaller devices. How can I fix this?

Also, when viewing on a mobile device the menu appears transparent and the submenus look strange (the text sits too far left with non padding around it). I would like the menu to look more like the attached screen shot.

Thanks!

[mtusaParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! Upon checking your website I can’t see any responsiveness issue on your mentioned section. Would you attach screenshot to point out the issue?

And regarding the Navbar, you have added the below code that’s causing the issue –

.x-navbar {
  background-color: rgba(255, 255, 255, 0.85);
  height: 110px;
  padding-top: 5px;
}

Kindly remove the height property to get expected result.

If you are using this for desktop version then you can add this :

@media only screen and (max-width: 979px) {
.x-navbar {
  height: auto;
}
}

Hope this helps.

Cheers!

[mtusaParticipant]

Thanks that fixed it immediately.

As far as the responsiveness goes, I guess you are right. I was just thinking certain elements would be a little smaller like the media grid in the first screen shot. I was hoping the gallery in the footer could be smaller like the second attached screens shot.

[RupokMember]

Hi there,

Thanks for updating. The way it is seems fine so no need to change anything I think.

Cheers!

[Author]

Posts