Can you post a link to the page in question?
Hi Thanks…
The following is the page in question that isn’t working as far as the mobile view goes
http://www.appianseo.com/letsgetstarted/
Hi The main page is http://www.appianseo.com/ that is working great on the mobile view.
You have this bit of CSS:
#page-content {
width: 640px;
margin: 20px auto;
text-align: left;
}
which sets the width of the container to be 640 pixels, regardless of the window size. If you deleted that line from the page template (and possibly added some left and right margins), you’d be good:
#page-contact {
margin: 20px 20px;
text-align: left;
}
Hi Thanks! it is definitely working on the mobile device now but on the website version the content now stretches across the entire screen.
You could set a maximum width on the container and also use a @media query to set a different maximum width on smaller screens:
#page-content {
max-width: 640px;
margin: 20px auto;
}
@media screen and (max-width: 796px) {
#page-content {
max-width: 90%;
text-align: left;
}
}
With this code, the container would be a maximum width of 640 pixels, with 20 pixels of margin on the top and the bottom and centered within the screen. However, if the browser window is 769 or less pixels wide, the maximum width of the container is 90% of the window, instead.
Worked Perfect Thanks so much!
