Enable scroll in <DIV> on mobile version only

HTML & CSS
1

Hi all again.

Few hours back I got great response from you guys and helped me set the image into position.

Now I’ve another issue.

I have table on main index page which has couple of columns, when we see it on desktop it looks all good but when we open it on mobile view the table shows only few columns as much as mobile screen can show. I want to have it scrollable in mobile view.

or if there is another way to fix the issue.

Hope you understand what I’m saying.

Website URL: www.ippbx.com

2

you are going to need to add the style overflow:scroll; That should do the trick

3

azhar-khan,

The page that you inherited from a friend has a few problems.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.ippbx.com%2F
(click the button that says “Message Filtering” for a summary view).

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.ippbx.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
(unfortunately the only summary is the total error count at the top of the list)

I cannot imagine why your friend assigned

html {overflow-x:hidden}
head {overflow-x:hidden !important}

except to hide the scroll bar being generated by the content elements with fixed widths.

All of the outer container elements have been assigned these three properties:

#header {  /* the header, the footer, and all of the sections */
    display: inline;
    float: left;
    width: 100%;
}

Unless this is a bootscrap convention that I’m unfamiliar with (which is possible), these elements should not have these properties, period. These elements should be left as default block elements with default block widths and not floated. Without floats in the outer elements, the overflow-x properties can be deleted from the <html> and <body> elements and the errors that are causing the scrollbar can be investigated and methodically eliminated.

If this is really supposed to be bootscrap code, then it needs to be properly framed and fixed.

2 Likes
4

This is a bit of a hack but the best I can do with that structure without re-writing the whole thing.

Add this CSS after the original styles.

@media screen and (max-width:991px) {
	#pakete .box {
		overflow:auto;
		min-width:0;
		width:100%
	}
	#pakete .box table {
		width:950px;
	}
	.rotate {
		margin:0!important;
		position:absolute;
		top:100px!important;
		left:auto!important;
		right:-150px!important;
		width:200px!important;
	}
	.front {
		position:relative;
		width:950px;
		padding-right:200px;
	}
}

Do it exactly as shown because there is a complicated sequence of events going on there.

2 Likes
5

I see this on my CSS.

Should i add your given code here?

@media(max-width:1199px ){
.header-content {
padding: 70px;
}
.header-content h2 {
font-size: 60px;
line-height: 58px;
}
.knowmore-btn {
font-size: 18px;
padding: 20px 25px;
}
.download-btn {
font-size: 18px;
padding: 20px 25px;
}
.header-btn-area {
margin-top: 65px;
}

6

Add it at the end, after everything else.

7

No don’t add it there.

As Sam said add it at the end of the CSS file after everything else and make sure its not nested inside another media query by mistake. Add the whole code I gave you including the media query.

The code has been tested on your live site so I know it works as best as it can.

8

Hi Paul i did it and it worked just perfect.

honestly saying I don’t know what happened in that code but its working good.

Thanks again guys you save my life.

9

Food for thought… someday.

Download and open in your browser to test.
For info, see comments at the top of the file and within the file.

horizontally-scrollable-table.html (11.3 KB)

It is an application of @PaulOB’s code in a page framed without the junk styles that permeate your code.

Do not blindly copy and paste any of this into your web page. It’s just a demo.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.