PageBuilder Responsiveness Help

My wordpress theme (Tesseract) and the PageBuilder plugin I have installed conflict with one another forcing me to do my own CSS coding. After toying around with CSS and the inspect element tool on chrome, I fixed the responsiveness (not really fixed, more like hacked I guess..) of my website thevandreasproject.com. I used this code to make it work on the iPhone 5 screen:

@media (min-width: 680px) {
	    .home-background .textwidget {
		    font-size: 50px;
		    font-style: normal;
                    font-weight: 500;
                   letter-spacing: 8px;
                   font-family: 'Roboto';
                   min-height: 880px;
                   padding-top: 20px;
	    }
    }
    @media (max-width: 679px) {
        .home-background .textwidget {
		    padding-top: 20px;
		    padding-bottom: 175px;
		    font-style: normal;
                    font-weight: 500;
                    font-family: 'Roboto';
        }
    .site-content {
        height: 0!important;
        }
    #footer-banner {
        padding:50px;
        }
    }

I was wondering if there was another way to rescale the text and images using CSS Editor to make my website responsive. I don’t want to use media-queries for every device there is to rescale properly. I appreciate it!

URL: http://thevandreasproject.com