|
Hi
I just want to remove responsive aspect when user users tablet size such as iPad. I want to keep responsive for phones etc. What I did was remove all the following CODE (see below) from the css file
catalog/view/theme/shoppica2/stylesheet/screen.css.php.
<?php // if ($is_mobile == '0'): ?>
/* ------------------------------------------------------------------------------------- */
/* --- Desktop and tablet layout ----------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* --- Min width: 1000px ----------------------------------------- */
@media only screen and (min-width: 768px) {
}
/* ------------------------------------------------------------------------------------- */
/* --- Min width: 768px / Max width: 991px ----------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.s_cell_model {
display: none;
}
.s_cell_name .s_hidden.inline {
display: inline !important;
}
.s_cell_quantity {
white-space: nowrap;
}
body {
min-width: 0;
}
body.s_layout_fixed #wrapper {
width: 740px !important;
}
.s_wrap {
width: 720px;
}
.s_wrap .s_col_12,
.s_main_col
{
width: 700px;
}
.s_col_3 {
width: 340px;
}
.s_col_3:nth-child(2n+1) {
<?php if ($language == 'ltr'): ?>
clear: left;
<?php else: ?>
clear: right;
<?php endif; ?>
}
/*** header ***/
#site_logo {
margin: 20px 0;
}
#site_logo img {
max-width: 260px;
}
#top_navigation {
top: 25px;
<?php if ($language == 'ltr'): ?>
right: 0;
<?php else: ?>
left: 0;
<?php endif; ?>
}
#language_switcher,
#currency_switcher
{
width: 70px;
}
#system_navigation #cart_menu {
<?php if ($language == 'ltr'): ?>
margin: 10px 0 -20px 30px;
<?php else: ?>
margin: 10px 10px -20px 0;
<?php endif; ?>
}
/*** intro ***/
#intro {
overflow: hidden;
padding-top: 20px;
}
#intro h1 {
padding-bottom: 0;
}
#product_intro {
height: 255px;
}
#product_intro .s_price_holder {
<?php if ($language == 'ltr'): ?>
left: 602px !important;
<?php else: ?>
right: 602px !important;
<?php endif; ?>
}
#product_intro_info {
width: 360px;
}
#product_intro_info p.s_desc {
overflow: hidden;
height: 120px;
}
#product_intro #product_intro_preview {
<?php if ($language == 'ltr'): ?>
right: 10px !important;
<?php else: ?>
left: -10px !important;
<?php endif; ?>
width: 320px;
height: 255px;
background: url(../images/intro_product_1.png) no-repeat 0 0;
}
#product_intro #product_intro_preview img,
#product_intro #product_intro_preview .slides_container
{
width: 200px;
height: 200px;
}
#product_intro #product_intro_preview .slides_container {
margin: 42px 0 0 70px;
}
#product_intro .s_button_prev,
#product_intro .s_button_next
{
top: 130px;
width: 32px;
height: 32px;
}
#product_intro .s_button_prev {
right: 258px;
background-position: 0 -42px;
}
#product_intro .s_button_next {
right: 10px;
background-position: -32px -42px;
}
#image_intro {
width: 720px;
padding-bottom: 20px;
}
#image_intro_preview {
height: auto !important;
}
#image_intro_preview img {
max-width: 700px !important;
height: auto !important;
}
#image_intro_preview.s_boxed img {
max-width: 680px !important;
}
/*** products ***/
.s_grid_view.size_2 .s_item {
width: 160px;
}
.s_grid_view.size_2 .s_item .s_thumb {
padding: 10px;
}
.s_single_col .s_grid_view.size_1 .s_item:nth-of-type(4n+1),
.s_2_cols .s_grid_view.size_1 .s_item:nth-of-type(3n+1),
.s_single_col .s_grid_view.size_2 .s_item:nth-of-type(6n+1),
.s_2_cols .s_grid_view.size_2 .s_item:nth-of-type(4n+1)
{
clear: none;
}
.s_grid_view.size_2 .s_item:nth-of-type(4n+1),
.s_grid_view.size_1 .s_item:nth-of-type(3n+1)
{
<?php if ($language == 'ltr'): ?>
clear: left;
<?php else: ?>
clear: right;
<?php endif; ?>
}
/*** product info ***/
.s_single_col #product_info dl {
width: 220px;
}
.s_single_col #product_share .s_rating_holder {
<?php if ($language == 'ltr'): ?>
margin-right: 120px;
<?php else: ?>
margin-left: 120px;
<?php endif; ?>
}
.s_single_col #product_price {
<?php if ($language == 'ltr'): ?>
right: 0;
padding: 0 0 10px 20px;
<?php else: ?>
left: 0;
padding: 0 20px 10px 0;
<?php endif; ?>
width: 100px;
}
.s_single_col #product_price .s_price {
position: relative !important;
}
.s_single_col #product_price p.s_price_tax,
.s_single_col #product_price p.s_reward_points {
<?php if ($language == 'ltr'): ?>
margin-right: 0;
<?php else: ?>
margin-left: 0;
<?php endif; ?>
text-align: center;
}
.s_single_col #product_buy_col,
.s_single_col #product_info
{
width: 340px;
<?php if ($language == 'ltr'): ?>
margin-right: 0;
<?php else: ?>
margin-left: 0;
<?php endif; ?>
padding-top: 0;
}
/*** shop info ***/
#shop_info {
padding-top: 10px;
margin-bottom: 20px;
}
#shop_info_wrap {
padding: 0;
}
#footer {
padding-bottom: 5px;
}
}
<?php // endif; ?>
When I removed this the problem is on Portrait on Ipad the screen seems to have zoomed in whereby you only see 3/4 of the content left to right. Is there another setting I am missing (no problem on Landscape).
I have attached a screengrab of the Portrait view on an iPAD. You will see how it has seemly zoomed in and is only displaying approx 3/4 of the page width.
Thank you
|
|
