Removing blank space on mobile version of site

@Danielabjo

Ah. I think I see the problem now. The following is not valid CSS.

font-family:'Stencil',arial;@media screen and (max-width: 767px) {
    .item-pagination-link {
        max-width:unset
    }
}

The font-family:'Stencil',arial; is errant. It is a property value pair not in a ruleset. It should be removed or placed inside a ruleset. So it appears the editor is able to muddle through the error but the public site is not.

Let us now how it goes.

@creedon

Oh, you are a life saver, now it works, thank you so much! If you have any clue I also liked to know how to remove the links "Action Paintball" and "Mission paintball" at the bottom of the site, cause we will probably end up removing them at some point. 

https://www.nasse.fi/palvelut/actionpaintball

https://www.nasse.fi/palvelut/missionpaintball

For the most part, editing the site has been quite easy, but some parts are really confusing.

@Danielabjo

You can hide the pagination site wide with the following.

.item-pagination {

  display : none;
  
  }

You won't need the other code if you use this code.

Let us know how it goes.

@creedon

Thanks again. worked!!

On 6/21/2020 at 8:25 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body {
    margin-top: 0 !important;
}
}

 

Hi! 

I'm having a similar issue with a black bar at the bottom of my site. Any ideas on how I can remove?

https://www.amymcneil.ca/
PW: amyamy

@amymmcneil

Let's try this.

Go to Settings > Mobile Information Bar. Select Disable Mobile Information Bar. Save.

Let us know how it goes.

1 hour ago, creedon said:

@amymmcneil

Let's try this.

Go to Settings > Mobile Information Bar. Select Disable Mobile Information Bar. Save.

Let us know how it goes.

Unfortunately it was already disabled 😞

@amymmcneil

Ah ha! I think I'm on the track now.

Go to Design > Site Styles.

Type in mobile in the search field.

Find MOBILE: BOTTOM > Bottom Background.

Change background color to your desired background color.

Save.

That may not work for your situation as your pages have different colors at the end of the page.

Alternative solutions would be to use CSS to hide the mobile section at the bottom of the site or set background color per above to work with most of the pages and then target specific pages to use alternate colors. Say green on the main page for example.

Let us know how it goes or if you want to use an alternate solution.

16 hours ago, creedon said:

@amymmcneil

Ah ha! I think I'm on the track now.

Go to Design > Site Styles.

Type in mobile in the search field.

Find MOBILE: BOTTOM > Bottom Background.

Change background color to your desired background color.

Save.

That may not work for your situation as your pages have different colors at the end of the page.

Alternative solutions would be to use CSS to hide the mobile section at the bottom of the site or set background color per above to work with most of the pages and then target specific pages to use alternate colors. Say green on the main page for example.

Let us know how it goes or if you want to use an alternate solution.

Hi! Unfortunately mobile:bottom isn't an option for me in site styles 😞

If there's some css code I can add to remove it that sounds like the best solution!

Thanks so much

2 hours ago, amymmcneil said:

Hi! Unfortunately mobile:bottom isn't an option for me in site styles 😞

Double check?

This is what I'm seeing.

I'm on the Brine template.

I type in mobile in the search field.

If that option doesn't show up for you. Is Developer Mode enabled for your site? DO NOT change the developer mode setting! You can destroy your site by doing so and it will be a painful experience!

If the answer is no to the above then CSS is the next step but it would be good to handle it with built-in settings if possible. The next question I would ask is why isn't the mobile bottom background option showing? What other options might not be showing?

8 hours ago, creedon said:

Double check?

This is what I'm seeing.

I'm on the Brine template.

I type in mobile in the search field.

 

If that option doesn't show up for you. Is Developer Mode enabled for your site? DO NOT change the developer mode setting! You can destroy your site by doing so and it will be a painful experience!

If the answer is no to the above then CSS is the next step but it would be good to handle it with built-in settings if possible. The next question I would ask is why isn't the mobile bottom background option showing? What other options might not be showing?

Ok developer mode not enabled & here's a screenshot of what I see. Not sure why it isn't showing!

@amymmcneil

Add the following to Design > Custom CSS.

.Mobile-bar--bottom {

  display : none;
  
  }

This is for v7.1.

Let us know how it goes.

On 8/19/2021 at 11:36 PM, creedon said:

@amymmcneil

Add the following to Design > Custom CSS.

.Mobile {

  display : none;
  
  }

This is for v7.1.

Let us know how it goes.

It worked, hooray!! Thanks so much

3 hours ago, amymmcneil said:

It worked, hooray!! Thanks so much

On 8/19/2021 at 11:36 PM, creedon said:

@amymmcneil

Add the following to Design > Custom CSS.

.Mobile {

  display : none;
  
  }

This is for v7.1.

Let us know how it goes.

oh nooo wait it made my mobile nav disappear 

6 minutes ago, amymmcneil said:

it made my mobile nav disappear 

That may have been to aggressive! Let me see if there is another way.

@amymmcneil

I have updated my code post.

Let us know how it goes.

16 hours ago, creedon said:

@amymmcneil

I have updated my code post.

Let us know how it goes.

I believe this has worked!!! Thanks so much

Hi,

This was so helpful conversation last time, so I try ask here again. In our website we have this portfolio page and the page is really nice, but problem is that we don't want that section in the picture. I'd like to delete the whole section, but it's not possible. Do you know if there are any ways to delete it or if the portfolio needs that part, is there any ways to make it much much more unnoticeable? 

Here you can see better what I meant: https://www.nasse.fi/tarjonta

@Danielabjo

Add the following to Design > Custom CSS.

/* action paintball haunted forest min height unset */

[data-section-id="[enter data section id here between double quotes]"] .portfolio-hover-display {

  min-height : unset;
  
  }

This if for a v7.1 site.

Enter your data section id and the url for the background image you want to use. Your data section id currently is 60461cd5d9da126db7cb111b.

To get the data section id check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

Site: https://www.thewellnesstravelexpert.com

I'm having the same issue on mobile, white space to the right - can anyone assist me please 🙌

I would also love to reduce the unused space on my footer (for mobile and desktop) and make it smaller but have no idea how to start, appreciate any assistance. Thank you.

On 10/13/2021 at 1:25 PM, SamL said:

Site: https://www.thewellnesstravelexpert.com

I'm having the same issue on mobile, white space to the right - can anyone assist me please 🙌

I would also love to reduce the unused space on my footer (for mobile and desktop) and make it smaller but have no idea how to start, appreciate any assistance. Thank you.

Add to Design > Custom CSS

footer.sections .content-wrapper {
    padding-top: 20px !important;
}

footer.sections section {
    min-height: unset !important;
}

I'm having a similar issue and none of the code above is working. on my page www.machinevisionortho.com I have two issues with mobile: 

1 - there is a lot of space between my scrolling images on the top and bottom when vertically. 

2 - When i move the phone to horizontal, the scrolling images are cut off by the logo

help..going crazy here

I'm using version 7.1

On 11/5/2021 at 4:23 AM, Topnotch-TM said:

I'm having a similar issue and none of the code above is working. on my page www.machinevisionortho.com I have two issues with mobile: 

1 - there is a lot of space between my scrolling images on the top and bottom when vertically. 

2 - When i move the phone to horizontal, the scrolling images are cut off by the logo

help..going crazy here

 

I'm using version 7.1

It looks fine to me.

hello everyone do you know how to remove the white space in the mobile homepage?

https://beta.moodmama.it

On 11/15/2021 at 10:07 PM, LEGOLAS said:

hello everyone do you know how to remove the white space in the mobile homepage?

 

https://beta.moodmama.it

 

 

Can you check site url? This is WordPress site?