LAS8687 Posted July 31, 2018 Share Posted July 31, 2018 I am in the process of re-designing the landing page for a non-mobile site (and yes, it would be ideal for it to be mobile and it physically pains me that it's not, but it's not in the cards right now) and two of the divs shrink down and align left when viewed on mobile. Looks fine in all browsers on desktop. Any idea why this may be happening? I feel like it's something simple I'm missing in the CSS. URL is https://impaactnetwork.org/testPage.htm and a screenshot of the mobile view is attached. Link to comment Share on other sites More sharing options...
Funce Posted July 31, 2018 Share Posted July 31, 2018 I might suggest checking the CSS of those two divs, they seem to match the width of the screen its being viewed on. Its mostly the width of the HTML tag that's being weird. It would seem that its inheriting the width of the browser you're viewing it on. Every div that doesn't define its own width gets strange like this An immediate fix of this would be From test.css - Line 284 body, html { height: 100%; margin: 0; } Inserting 'width: 1475px' will entirely fix this issue. Let me know how it goes. (This could break other pages, but its not easy for me to test that) Possible result: If you wanted to fix it entirely... well... That would unfortunately require the redesign you don't have the cards for, so there you go. Good luck with your redesign! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 1, 2018 Share Posted August 1, 2018 The hero section is the width of body, the other sections are the fixed greater width extending beyond the body width, you are only seeing two thirds of these sections extending beyond the body width, with the correct hero section body width being pushed to left so you can see the two thirds width of these sections. Link to comment Share on other sites More sharing options...
webtrickshome Posted August 1, 2018 Share Posted August 1, 2018 (edited) The first issue with your site even on larger screen view is the divs with id #banner-container and content-container. Remove the width value from their css. The html div tag automatically possesses a property display:block which means 100% width inclusive of paddings and margins. #content-container { background-color: #FFF; margin: 0 auto; padding: 25px; overflow: auto; } Once you do that your box1, box2 and box3 also need to be redefined. Define them as show below. .box1{ width: 30%; float: left; } .box2{ width: 30%; float: left; margin-left: 5%; } .box1{ width: 30%; float: right; } For device responsive first of all, add this line inside your <head> tag. <meta name="viewport" content="width=device-width, initial-scale=1"> Then redefine your div's widths as 100% wherever needed inside the media query. You can use @media(max-width: 767px){} for smaller screens at once. You can use @media(min-width: 768px) and (max-width: 991px){} for tablets. You can use @media(min-width: 992px) and (max-width: 1024px){} for desktops. Edited August 1, 2018 by Ingolme Advertising Link to comment Share on other sites More sharing options...
LAS8687 Posted August 2, 2018 Author Share Posted August 2, 2018 Thanks, all! @Funce your suggestion seemed to work best. Now it looks pretty good on mobile but is being pushed to the left on desktop! (see screenshot) Link to comment Share on other sites More sharing options...
dsonesuk Posted August 2, 2018 Share Posted August 2, 2018 You should never EVER! apply a fixed width to body or html, you need to apply this width to a element block container surrounding all the content, then you can control this container width within media queries, and with margin: 0 auto; will cause it to centre horizontally. What is happening now is with the body, html being a fixed width of 1475px, any device size width greater than this will cause by default to show the smaller width of body, html positioned to the left. Link to comment Share on other sites More sharing options...
Funce Posted August 3, 2018 Share Posted August 3, 2018 @LAS8687 An interesting thing to note is that I saw your website in a screen size smaller than the specified width, so I had to scroll to see all of it. Having played around with this a bit, I advise you to follow dsonesuk's advice. To get the beginnings of something that will work, I suggest you do the following: test.css, line 284 Remove width body, html { height: 100%; /* width: 1475px; */ margin: 0; } test.css, line 106 Remove width #banner-container { /* width: 1492px; */ margin: 8px auto; height: 100px; } test.css, line 26 Change overflow to hidden, or remove it. .hero-image { background-image: url(/images/carousel/hero2.png); padding-top: 50px; height: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; } test.css, line 325 remove width #content-container { /* width: 1475px; */ background-color: #FFF; margin: 0 auto; padding: 25px; overflow: auto; } test.css, line 594 remove width #footer-container { /* width: 100%; */ background-color: #132442; padding: 15px; } Some next steps after this would be looking at the padding or other such things for the boxes and buckets. You will also have to look at your navigation, doing this will absolutely destroy it. This should give you something to start fixing up, and will be a better base than what you have now. What browser do you tend to use for developing? Link to comment Share on other sites More sharing options...
Funce Posted August 3, 2018 Share Posted August 3, 2018 (edited) As an alternative @LAS8687, instead of using a 'Width' in the HTML where I specify, you could define a 'min-width' of the same value. That would work for the mobile, and the Desktop. But it won't be the most perfect Edited August 3, 2018 by Funce Link to comment Share on other sites More sharing options...
dsonesuk Posted August 4, 2018 Share Posted August 4, 2018 23 hours ago, Funce said: As an alternative @LAS8687, instead of using a 'Width' in the HTML where I specify, you could define a 'min-width' of the same value. That would work for the mobile, and the Desktop. But it won't be the most perfect How would that work for mobile? min-width: 1475px, means any device under 1475px especially the smaller mobiles, would mean you will have to zoom out or scroll everytime to see the whole of site, then zooming out means you won't be able to read the text or see images sufficiently. Link to comment Share on other sites More sharing options...
Funce Posted August 10, 2018 Share Posted August 10, 2018 On 8/4/2018 at 3:45 PM, dsonesuk said: How would that work for mobile? min-width: 1475px, means any device under 1475px especially the smaller mobiles, would mean you will have to zoom out or scroll everytime to see the whole of site, then zooming out means you won't be able to read the text or see images sufficiently. It will work for mobile, but it definitely won't be optimal. That would be an issue for another time, as LAS does not wish to make a mobile design and, judging by the demeanor, wanted a relatively quick fix. I definitely agree that fixing it for good would be a better course of action, and I encourage @LAS8687 to strongly consider it. 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