responsive.css full screen width

Everything to do with Joomla! 3.x templates and templating.
Post Reply
Designls
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Tue Feb 23, 2021 6:18 am

responsive.css full screen width

Post by Designls » Tue Feb 23, 2021 6:23 am

Hi, looking to modify this so website looks full screen width, can anyone point me to right direction?
This is from 1 of Joomlage templates. I can adjust template with for pc but not mobile devices.
so while all contest looks ok on pc, on mobile its just to small as its all boxed in.
here is css:


/*Global Responsive CSS*/
img {
height: auto;
max-width: 100% !important;
}
form{margin:0px !important;}
#mobile_search form .search label{display: none !important;}
#container_logo_menu_mobile .wrapper960{width: 100% !important;}

/* # - Medium Devices
================================================== */
@media only screen and (max-width: 1024px) {

/* Default Settings */
.wrapper960 {width:100% !important;}
.spacer {height: 120px !important;}

/* Hide Containers/divs */
#container_header {display:none !important;}
#hornav{display:none !important;}
#container_header-sticky-wrapper{display:none !important;}

/* disable css animations */
.animated {
-webkit-animation-duration: 0;
animation-duration: 0;
-webkit-animation-delay: 0;
animation-delay: 0;
}

/* Adjust divs*/
#slideshow.block_holder{padding-top: 0px !important;}

#social {box-shadow: none !important;}
#social ul {margin-top: 0px !important;}
#social ul li {padding-right: 5px;}
#social ul li a {height: 30px; width: 30px;}

/*------ Mobile Containers Styling------ */

/* Mobile Menu */
.slicknav_menu {display:block; clear: both;}


/* Show mobile logo and navigation */
#container_logo_menu_mobile {display: block; z-index: 5000; height: 120px; position: absolute; top: 0px;}
#logo_mobile {position: relative; text-align: center;}



/* Show mobile social icons*/
#social_mobile{height:auto;}

#social {
float: right;
z-index: 11;
top: 80px;
}

}


/* # - Small Devices
================================================== */
@media only screen and (max-width: 767px) {

/* Default Settings */
.top-1, .top-2, .contenttop, .contentbottom, .bottom-1, .bottom-2, .base-1, .base-2, #sidecol_a, #sidecol_b {width:100% !important;}
#sidecol_a, #sidecol_b{width:100% !important;}
#content_remainder {width:100% !important;}

/* Hide divs */
#breadcrumb.block_holder {display: none;}

/* Adjust divs*/
#container_main{padding-top:0px !important;}
#slideshow.block_holder{padding-top: 0px;}
#social ul {margin-top: 0px !important;}

}



/* ipad iphone specific */

/* # - iPad Landscape
================================================== */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {

/* Default Settings */
.wrapper960 {width:100% !important;}

}


/* # - iPad Potrait
================================================== */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {

/* Default Settings */
.top-1, .top-2, .contenttop, .contentbottom, .bottom-1, .bottom-2, .base-1, .base-2, #sidecol_a, #sidecol_b {width:100% !important;}
#content_remainder {width:100% !important;}
img {float:none !important;}


}

Pavel-ww
Joomla! Intern
Joomla! Intern
Posts: 78
Joined: Tue Jun 30, 2020 12:17 pm

Re: responsive.css full screen width

Post by Pavel-ww » Tue Feb 23, 2021 6:42 am

Hi. It is not possible to help based on the provided code. It is better to provide a link to the site and a screenshot of what you want to achieve

Designls
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Tue Feb 23, 2021 6:18 am

Re: responsive.css full screen width

Post by Designls » Tue Feb 23, 2021 6:55 am

Hi and thanks.
its www.designls.co.uk
i have adjusted templated with to 1850px for pc but can not find how to adjust width for mobile.

Pavel-ww
Joomla! Intern
Joomla! Intern
Posts: 78
Joined: Tue Jun 30, 2020 12:17 pm

Re: responsive.css full screen width

Post by Pavel-ww » Tue Feb 23, 2021 7:56 am

It is not clear what you need. Now the site is completely fluid, 100% width starting from 1850px. This is as you wanted.
1.jpg
You do not have the required permissions to view the files attached to this post.


Post Reply

Return to “Templates for Joomla! 3.x”