Help with my html template

HTML & CSS
1

Hi,

I am making an html template, I took bits and pieces from here and there which I liked to create a layout I want. All is working fine in pc, but in mobile I am facing 2-3 issues which I am not able to figure out. Please help me fix the issues

Template: http://rtifed.com/template/box.html

  1. The menu I am using becomes sticky i.e when page is scrolled in mobile view it sticks to its position instead of getting scrolled. Please check in mobile. I am using webslide menu.

  2. When I checked the template in my android mobile (firefox) I see that the webpage is scrollable to left side. I don’t understand why that is happening. I have tried to fix it by editing some css but it does’nt seems to be helping.

Please help me fix these 2 issues.

Thanks.

2

Two things I noticed:

  1. A horizontal scrollbar appears at about 750px width.

  2. Failed to load resource color-theme.css: the server responded with a status of 404 (Not Found)

You load a lot of style sheets which will make finding what is causing the horizontal scrollbar rather tricky.

3

It has a fixed position in mobile view.

http://rtifed.com/template/css/webslidemenu.css Line 1066
.smallogo { position: fixed; }

That is because the menu is wider than the screen. I believe the root of this problem is the container <div class="row"> on line 68, the class row has -15px negative margins on either side causing it to exceed the screen width. The menu has 100% width, so exceeds screen width too.

2 Likes
4

Bootstrap is a framework, a grid system. It expects you to follow the rules of the framework to the letter. If you do not intend to follow the rules of the framework, you should not use it.

You cannot zero the padding on .container and expect the Bootscrap grid to function, etc. Read the manual. It’s a complicated system for a one-of page, and you cannot mix and match the way you have begun.

2 Likes
5

hi,

Thanks for the tips, I tried do the following:

  1. When I remove the position:fixed it does’nt stick but the the 3 menu lines does’nt show in the bar.

  2. I also removed the extra row / col on line 68 but still the template is scrollable to the left side.

  3. I also added a red border to menubar to see if it was exceeding the width but its not. How do I find out what wider than the template that is coming the scroll bar to show up ??

Please help.

Thanks.

6

Hi,

I think i have used padding at that one place only, but somehow its working. If i don’t put remove padding in container then the layout is not coming properly. All the things in the template is fine, just due to the menu bar i have to use hacks, its not easy to put the menu bar in the template.

Thanks.

7

That has a fixed position too. For some reason the fixed positioning was given to the individual elements, not a common parent.

It must need a combination of fixes, when I was testing in inspect earlier, removing the row class fixed it, but I had tried other things already too, so it may need some other tweaks.

This.
If you want to use Bootstrap, you must learn Bootstrap. If you don’t want to learn Bootstrap, don’t use Bootstrap.
PS, I have not learnt Bootstrap and don’t intend to.

1 Like
8

You are still mixing and matching and have not read the Bootstrap instruction manual.

One cannot have nested .containers and one cannot remove the padding from one of them either using an inline style.

If you do not wish to follow the rules of Bootstrap, I’d suggest that you leave it out of your page.

1 Like
9

hi,

This is how one learns, I am stuck at this, I need to know what I have done that is causing it.

Thanks.

10

Methodically remove items from your page until the problem goes away. Then find out what is causing the problem.

1 Like
11

Hi,

That helped I was missing col after a row. Now there is no left scrolling of the template in responsive view. How do I fix the nav ?? Any tip on that will be highly appreciated.

Thanks in advance.

14

Hi,

Thanks for the help, but I don’t see position:fixed anywhere for #wsnavtoggle. Where are you seeing it ?

Thanks.

15

Yes, you are totally correct. I was copying HTML from the inspector and made some horrible mistakes. I apologize for that and thanks for showing it quickly.

Seems like only thing required is to remove position:fixed; and update

.animated-arrow{
cursor: pointer;
padding: 13px 35px 16px 0px;
float: left;
position: relative;
margin: -40px 0 0 15px;
}

.wsoffcanvasopener .animated-arrow{
left: 0;
}

Sorry again for the mistake earlier.

@TechnoBear, I have removed the wrong answer I gave earlier considering people looking for solution similar to this.

2 Likes
16

Sorry @Tapan, I did some mistakes in my earlier answer. I have added a better solution.

17

I would position the nav to the top of the page on mobile because it needs to still be there when you open the side menu as that is how it would seem to have been designed. Don’t remove the fixed position or it will all break.

Add these extra rules after all your other styles (assuming you haven’t removed the fixed position yet).

@media only screen and (max-width: 780px) {
  .animated-arrow,.smallogo{top:0}
   #header > .container {margin-bottom:0;display:block;}
.logo{margin:60px auto 0}
}

As others have said you can’t change the bootstrap grid code directly without affecting everything else. Containers can’t be nested and columns must be inside rows as they have negative margins to offset the padding on the container and nested rows etc. You must follow the boostrap grid rules and they are explained on the bootstrap page in clear and unambiguous terms so study carefully :slight_smile:

18

There is still a horizontal scrollbar at 430px which is caused by your iframe with a class of PBTooltipFrame that pushes the page wide. I’ve no idea what the iframe is for so you should double check where it comes from?


 <iframe class="PBTooltipFrame"
19

Hi,

It must be something on your mobile as on my mobile I am not getting it. Are you checking it in emulated browser or proper mobile ? Because I have not used any iframe in the code.

Thanks.

20

Hi,

Thanks for the help. The nav is working now.

Thanks.

21

Just for curiosity. How did you manage it?

22

Hi,

Sorry I did’nt get you. Please explain.

Thanks.