Docs

[TheLunchBawx]

Hi.
So I have some spacing issues on some of my pages on mobile and tablet view.
Pages that have issues are:
Home: The columns are digging into the slider
Contact me: The contact options are overlapping eachother
Pricelist: The columns I have setup for the pricing, some of the text inside are overlapping with the other columns text.

I think that’s the issues with the pages. I’ll update if there’s more.

I’ll also add another reply with the login details.
Thanks!
Website is: http://thelunchbawx.com/

[TheLunchBawx]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please remove negative top margin margin-top: -100px; from container of section #2.

#2 Remove negative margin from section #5 container.

#3 Remove height inline CSS from columns. Columns resize automatically base on their content length.

Hope it helps.

[TheLunchBawx]

On which pages? Because a lot of the columns have margin-top: -100px;

[Rupok]

Hi there,

Thanks for writing in! Using negative margin is not a good practice at all as it might create unexpected layout issue. So I’d suggest you to remove them all. First try to remove where you are having issue.

Thanks

[TheLunchBawx]

I can try to do that. But then what happens is things like the slider is not attached to the header like I want it to be and some things are spaced way too far away from each other. Right now on tablet on every page except the homepage the sliders are way off the header. Could you help me fix that?

[TheLunchBawx]

I have fixed some of my issues with the spacing but on the pricelist page the text is still overlapping and I’m not sure how to fix that and also I have aligned 2 columns to the middle and on mobile tablet there way off to the side.

Also I need help fixing my sliders, because I contacted support for my slider plugin. I have been having issues where when I’m previewing the slider for mobile and tablet in the plugin editor the slider is fine but once I see it on the live site, the theme does something to it to mess it all up. Also there’s spacing issues for the sliders on mobile and tablet as well.

Would you be able to help me fix those things?

Thanks!

[Rupok]

Hi there,

Thanks for writing back. Would you kindly add a screenshot for your current isue so that we could check and suggest you something?

Cheers!

[TheLunchBawx]

Sure!
Here’s the first screenshot for the slider issue: http://prnt.sc/by1cqi In the slider editor it looks fine on the preview but on the live site when selecting the phone view it breaks it.

Next is the text overlapping issue on the pricelist page on mobile: http://prnt.sc/by1d6m

Thanks!

[Christopher]

Hi there,

#1 It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

#2 You’ve limited column height. Please remove the inline CSS height from columns, see the attachment.

Hope it helps.

[TheLunchBawx]

Alright thanks! Last thing I need help with for mobile is the 2 cards I have set to the middle (The top of my order list one and want something not listed) but on mobile there off to the side a little bit, is there a way to fix that? I need them set to the middle.

[Nabeel A]

Hi again,

You’re giving fixed width to both of your elements that’s why they don’t stay in the middle. Just remove the width as shown in the attached screenshot to fix the problem.

Cheers!

[TheLunchBawx]

Okay thanks! All issues are fixed!

I would like the columns to have fixed widths so there not so long but it seems that breaks mobile use for it.

[Rue Nel]

Hello Again,

Thanks for the updates! If you want to have a fixed width for your columns on desktop screens, you may insert an inline css in your column settings. Please insert max-width: 123px; and make sure that the maximum width should be at least not less than the width of the mobile screen which is 767 pixels.

The other way is that you can insert a custom my-column ID or my-column-class class in your column settings. And then go to the settings tab, Settings > Custom CSS

@media(min-width: 980px){
  #my-column {
    width: 123px;
  }
}

Or if you are using a class

@media(min-width: 980px){
  .my-column {
    width: 123px;
  }
}

Hope this helps.

[Author]

Posts