Jump to content

Some divs shrink and align left on mobile

LAS8687

By LAS8687
in CSS

 Share

Recommended Posts

LAS8687 Newbie

LAS8687

Posted
Posted

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. 

mobile.jpg

Link to comment
Share on other sites
Funce Invested Member

Funce

Posted
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
webtrickshome Newbie

webtrickshome

Posted
Posted (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 by Ingolme
Advertising
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
Funce Invested Member

Funce

Posted
Posted

@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
Funce Invested Member

Funce

Posted
Posted (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 by Funce
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted
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
Funce Invested Member

Funce

Posted
Posted
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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...