Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Removing blank space on mobile version of site


Recommended Posts

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

Link to comment
  • 2 weeks later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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

Link to comment
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.

1646168563_ScreenShot2021-08-19at11_11_14AM.png.2775ba2691e25f6735ec98b3796921d5.png

I type in mobile in the search field.

489480964_ScreenShot2021-08-19at11_12_24AM.png.e6aebb739b1facf4e7a67f18a94ea484.png

 

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?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
8 hours ago, creedon said:

Double check?

This is what I'm seeing.

I'm on the Brine template.

1646168563_ScreenShot2021-08-19at11_11_14AM.png.2775ba2691e25f6735ec98b3796921d5.png

I type in mobile in the search field.

489480964_ScreenShot2021-08-19at11_12_24AM.png.e6aebb739b1facf4e7a67f18a94ea484.png

 

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!

 

Screen Shot 2021-08-19 at 11.16.12 PM.png

Screen Shot 2021-08-19 at 11.16.26 PM.png

Screen Shot 2021-08-19 at 11.16.35 PM.png

Link to comment
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 

Link to comment
  • 4 weeks later...

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

Näyttökuva (51).png

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...