Need help with reponsive site- fit entire content on cell-phone

Hello, the test site is: codedivasites.com/zaragoza/

He likes the look of it, but on his cell phone there is white space around the website, and he wants the actual content to fill the space. Can I do that without harming the responsiveness of the site? How do I go about it? He has a smartphone, I am not sure which one. Thanks.
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hankknightCommented:
Add this to the bottom of your "custom.css" file:

@media screen and (max-width: 700px) {

 body .transparent-bg {
  -moz-box-shadow: rgba(0, 0, 0, 0) 0 0 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0 0 0;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0;
}

 body #divBoxed {
  margin: 0;
 }

}

Open in new window

0
GaryCommented:
Remove the body padding at the mobile widths
body {
    padding-left: 20px;
    padding-right: 20px;
}

I don't know at what size you would want to remove them?
0
mel200Author Commented:
Thanks to both of you- if I wanted to remove them at 600px width, what could I do?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

GaryCommented:
@media screen and (max-width: 600px) {
body {
    padding: 0;
}
}
0
hankknightCommented:
The code I posted removes it at 700px.  If you want it removed at 600px use this:

@media screen and (max-width: 600px) {

 body .transparent-bg {
  -moz-box-shadow: rgba(0, 0, 0, 0) 0 0 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0 0 0;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0;
}

 body #divBoxed {
  margin: 0;
 }

}

Open in new window

GaryC123's code will remove all the left and right padding but mine leaves some padding there but makes it look open.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
Thought he wanted to remove it all and body #divBoxed will only remove the top margin.

Amendment to my style, you will need to leave a padding of 5px because your slideshow overlaps the body.  Or amend your negative margins on camera_full_width
If you set it to 0 you will end up with scrollbars.
0
mel200Author Commented:
I'm sorry to change the question, but if he wants  me to remove the outer space on all  machines, would I just do this:?

@media screen  {

 body .transparent-bg {
  -moz-box-shadow: rgba(0, 0, 0, 0) 0 0 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0 0 0;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0;
}

 body #divBoxed {
  margin: 0;
 }

}
0
GaryCommented:
Do you want to remove the left and right padding?
body #divBoxed will only remove the top padding.

It doesn't matter what device the css is the same.
0
mel200Author Commented:
correct, left and right as well as top.
0
GaryCommented:
Then use
@media screen and (max-width: 600px) {
body {
    padding: 5px;
}
} 

Open in new window

If you can amend the negative margins on the slider then you could remove the padding completely
0
mel200Author Commented:
I'm not quite sure how to do that...amend the negative margins on the slider?
0
GaryCommented:
What you could do in your media query from above is adjust .camera_full_width
So what you would have is

@media screen and (max-width: 600px) {
body {
    padding: 0;
}
.camera_full_width {
    margin-left: -35px;
    margin-right: -35px;
}
#divBoxed {  /* add in hankknight's suggestion */
    margin-top: 18px;
}
} 

Open in new window


You have some <br> tags at the bottom of the page that need to be removed manually and add the spacing using css so you can cancel it in the media query above.
0
mel200Author Commented:
Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.