.watchVideo { width: 65%; float: left; margin-top: 0px; margin-bottom: 10px; } .theatreWatchVideo { float: none; margin: 0 auto; width: 85%; margin-bottom: 10px; } .videoPlayer { width: calc(65% + 30px); float: left; margin-top: 0px; margin-left: 10px; margin-bottom: 10px; } .theatrePlayer { width: calc(85% + 30px); float: none; margin: 0 auto; margin-bottom: 10px; } .watchVideoRecommendations { width: 27%; max-width: 425px; float: right; margin-bottom: 10px; position: absolute; top: 70px; right: 10px; } .theatreRecommendations { float: none; margin: 0 auto; width: 85%; max-width: none; position: static; } @media only screen and (max-width: 1500px) { .watchVideo { width: 63%; } .videoPlayer { width: calc(63% + 30px); } .theatreWatchVideo { width: 85%; } .theatrePlayer { width: calc(85% + 30px); } } @media only screen and (max-width: 1350px) { .watchVideo { float: none; margin: 0 auto; width: 85%; margin-bottom: 10px; } .videoPlayer { float: none; margin: 0 auto; width: calc(85% + 30px); margin-bottom: 10px; } .watchVideoRecommendations { float: none; margin: 0 auto; width: 85%; max-width: none; position: static; } }