[Alex KetchumParticipant]

Hi Before I start with my question I just want to say this theme is absolutely fantastic, and the support team as well.

Going forward with my question – I’m having trouble with my site in mobile view. There are large gaps in-between the column sections and I’d like to know how to fix this?

Here is a link to my site, http://thebirdstheword.com/

[RadModerator]

Hi Alex,

Thanks for posting in.

Is this created from cornerstone? If yes, then you can inspect your gap using cornerstone and hide it from mobile. You should able to see the HIDE BASED ON DEVICE WIDTH option.

Hope this helps.

[Alex KetchumParticipant]

I have several gaps used, I’m not sure which to adjust… is there anyway I can provide my login details for assistance?

[ZeshanMember]

Hi Alex,

If you have added multiple Gap elements, you will need to manually edit them to hide on mobiles. Apart from the Gap elements, you have used large margin-top in the rows. You can use following CSS code to remove the margin-top on smaller screens:

@media only screen and (max-width: 767px) {
  .home .x-section .x-container.marginless-columns {
    margin-top: 0 !important;
  }
}

Thank you!

[Alex KetchumParticipant]

So I went through each gap and chose hide on smaller screens, but it doesn’t seem to be working the result is still the same:

[Rue NelModerator]

Hello There,

Upon checking your custom css, you have inserted an invalid code leaving some of the block unclosed. Please update some parts of your code by using this:

@media ( min-width: 0px ) {
 .x-navbar {
  display:none;
 }
}

#youtube { 
  width: 70px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

#facebook {
  width: 70px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;  
}

#twitter {
  width: 70px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

#insta {
  width: 70px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

#vine {
  width: 70px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

#tbtw { 
  width: 120px;
  display: block;
  margin-right: auto;
  margin-bottom: 0;  
}

Hope this helps.

[Alex KetchumParticipant]

Thank you so much, that’s much better!

I just have one more thing I need adjusting for, there’s a slight scroll on the page by like less then a few pixels… how do I eliminate this?

[RadModerator]

Hi there,

I don’t see any scroll bar from my end when viewed on larger or mobile device. Even if we fix it, there will still scrolling. Would you mind providing a screenshot? I may able to find to what screen size it’s appearing.

Thanks!

[Alex KetchumParticipant]

I’m using a laptop, with a 13 inch screen, this is how I’m seeing it. it’s literally like a few pixels.

[Alex KetchumParticipant]

Opps says the file was too large

[Alex KetchumParticipant]

It’s saying its too large. I shrunk it down, it’s not the best but here it is again:

[NicoModerator]

Hi There,

try adding this in your customizer’s custom CSS;

it will remove scroller from 767px screensize and above.

@media only screen and (min-width: 767px) {
  .body {
       overflow-y: hidden;
    position: fixed;
    width: 100%;
  }
}

Adjust the min-width to enable the scroller again.

Hope it helps.

Thanks.

[Alex KetchumParticipant]

I input that code and now there’s a huge glitch on my site… I tried taking the code out but the site is still glitching

[John EzraMember]

Hi there,

Thanks for updating the thread! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Alex KetchumParticipant]

This reply has been marked as private.

[Author]

Posts