newcoder1010 Posted September 29, 2016 Share Posted September 29, 2016 Hi, I have some images under the class ".views-field.views-field-field-home-page-servces" on my page. Page link is http://webuyhousesinnova.com/. I see the images correct sized in Chrome but I see the images way big in IE. If you please inspect my page and help me what causing this issue. Please. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2016 Share Posted September 30, 2016 Its not a specific problem for IE, other better browsers show the same problem example Firefox, even Chrome shows horizontal scrollbars with small amount of movement, and Opera shows exactly the same as Chrome, which suggests to me, only non web-kit browsers will show massive images. Link to comment Share on other sites More sharing options...
newcoder1010 Posted September 30, 2016 Author Share Posted September 30, 2016 I spent a lot of time. If you could please help me fixing the issue... Link to comment Share on other sites More sharing options...
dsonesuk Posted September 30, 2016 Share Posted September 30, 2016 As already suggested, find alternative to using a table. Using tables IS the problem, for smaller devices you have to make it one column instead of 4, tables can't do that, images, long words will bleed in to other columns cells, making impossible to read. Link to comment Share on other sites More sharing options...
newcoder1010 Posted October 1, 2016 Author Share Posted October 1, 2016 Actually, I will disable the table for mobile and tablet. I made some progress. If you please visit my site and help me to make it look same in all browsers. I have four fields. I like to place them in the center of page with same padding between the fields. Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 1, 2016 Share Posted October 1, 2016 You are using class 'row' which uses -15px left and right margins as direct child elements of body, meaning they will extend beyond left right edges of browser window, causing scrollbars to appear. Normally these elements using 'row' class would be placed in a parent element using 'container' class which uses 15px left and right padding (causing content to be 15px away from L/R browser window edges), then the 'row' class would bring it back to total browser window, or container width (media queries control width to fixed widths depend and viewing width). Bootstrap now or did use a class 'container-fluid' (not available in your version it seems) which is responsive to width of browser window. You require this to correct scrollbar issue, this is what it would usually be .container-fluid { padding: 0 15px; } create opening div directly following <body> <div class="container-fluid"> and obviously a closing </div> tag before </body> Any direct child sibling elements must use class 'row' to fill the whole width of browser window. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now