Currently, I am working on a small project involving a responsive website that utilizes the Skeleton responsive grid. To ensure that the content is centered vertically in the viewport, I am using jQuery.
<script>
$(document).ready(function(){
$(window).resize(function(){
$('.container').css({
position:'absolute',
left: ($(window).width()
- $('.container').outerWidth())/2,
top: ($(window).height()
- $('.container').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
});
</script>
However, I have encountered an issue where if the viewport size is smaller than the outer width of the container, it still applies absolute positioning.
My objective is to only apply absolute positioning to center the content in the viewport when the viewport is larger than the container's outer width. Is there a way to achieve this functionality with jQuery?
EDIT >>>>>
I am considering the following approach, but I am not entirely sure if it is correct:
$(document).ready(function(){
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
$(window).height(); // returns heightof browser viewport
$(document).height(); // returns height of HTML document
var width = $(window).width();
var height = $(window).height();
if ((width >= 1024 ) && (height>=768)) {
$(window).resize(function(){
$('.container').css({
position:'absolute',
left: ($(window).width()
- $('.container').outerWidth())/2,
top: ($(window).height()
- $('.container').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
}
else {
//do nothing
}
});