I’m quite new in making websites. I can read and write some CSS and HTML and a little bit of Javascript. But i have found some problems now with my website. If the screen resolution is low and if you wanna visit my site then it will cut off the right side of my site. Also if you visit it with a mobile device it will cut off and you cannot zoom out or scroll to the right/left side.
Now when i was busy checking and coding for the phone (i can check iPhone 5 only) i used this code
<meta name=”viewport” content=”width=device-width, maximum-scale=0, user-scalable=yes, max-zoom=5, min-zoom= 0.25 ” />
But it didn’t work. Now when i had some other problems i asked some people to view my website and fixed the issues but when someone was looking on my site with a low resolution it will cut off the right side of the website same as the mobile.
Now i think i need to make a css file with the resolutions in it and let the head and body shrink to another % but i have no idea where to begin and how to begin and what the % must be. Hope you guys can help me out i will appreciate it!
to fix your problem you just need to add just
min-width: 1260px; to your body in default.css
Like this
body {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
color: #000000;
min-width: 1260px;
}
this is because most of your divs have 1200 width and you have margin: 30px so that make your site width should be about 1260px
I tried it on your site and it work
also i notice your slider in the main page not looking good you just need to make the slider wrapper width 100% in style.css file like this
.slider-wrapper {
width: 100%;
margin: 0px auto;
}