**************************************************************************************************
This will avoid your website from appearing differently across different desktops and browsers but maintain the ability to browse via smartphone. It also resolves that annoying logo resizing issue
**************************************************************************************************
Hi if you want only mobile view and a single desktop view, open screen.php.css located in:
catalog>view>theme>shoppica>stylesheet>screen.css.php
…delete the following:
<?php // if ($is_mobile == '1'): ?>
/* ------------------------------------------------------------------------------------- */
/* --- Mobile Layout (320px) ----------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* --- Max width: 767px ----------------------------------------- */
@media only screen and (max-width: 767px) {
/*** hide some elements ***/
#fb-root,
#view_mode,
#menu_home,
#product .s_tabs_nav,
.s_cell_model,
.s_cell_price,
.s_cell_cart,
.s_cell_size,
.s_cell_date,
.s_cell_download,
.s_cell_opened,
.s_cell_comment,
.s_cell_action,
.s_cell_quantity,
#shopping_cart .s_cell_name,
#wishlist .s_cell_name,
.pagination .results
{
display: none !important;
}
/*** typo & spacing ***/
body {
min-width: 0 !important;
font-size: 14px;
}
body.s_layout_fixed {
padding: 10px 0 !important;
background-image: none !important;
}
select {
font-size: 12px;
}
#intro,
#product_image_preview
{
margin-bottom: 20px;
}
.s_side_col .s_box,
.s_side_col .s_box_1
{
margin-left: 0 !important;
margin-right: 0 !important;
}
/*** layout ***/
.s_wrap {
width: 280px;
}
.s_col,
.s_col_3,
.s_col_4,
.s_col_5,
.s_col_6,
.s_col_12,
.s_main_col,
.s_2_cols .s_main_col,
.s_side_col,
.s_total,
#categories,
#product_images,
#product_info,
#product_buy_col,
#intro h1
{
clear: both !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.s_main_col .s_col {
margin-left: 0 !important;
margin-right: 0 !important;
}
.s_2col_wrap,
.s_3col_wrap,
.s_4col_wrap,
.s_5col_wrap
{
padding: 0 !important;
}
.s_1_2,
.s_1_3,
.s_1_4
{
width: 100%;
}
#wrapper {
overflow: hidden;
width: 100% !important;
border: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: none !important;
}
/*** header ***/
#site_logo {
clear: both;
display: block;
float: none;
margin: 20px 0;
}
#site_logo img {
max-width: 280px;
margin: 0 auto;
}
#top_navigation {
position: static !important;
width: 280px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#currency_form,
#language_form
{
display: inline-block;
float: none !important;
<?php if ($language == 'ltr'): ?>
margin-right: 8px;
<?php else: ?>
margin-left: 8px;
<?php endif; ?>
}
#language_switcher,
#currency_switcher
{
width: 90px;
}
#site_search input {
font-size: 15px !important;
}
.s_dynamic #search_bar {
top: auto;
<?php if ($language == 'ltr'): ?>
right: auto;
margin-left: -246px;
<?php else: ?>
left: auto;
margin-right: -246px;
<?php endif; ?>
margin-top: -41px;
}
.s_dynamic #search_bar input {
width: 130px;
}
#search_bar .s_button_1 {
<?php if ($language == 'ltr'): ?>
margin-left: 150px;
<?php else: ?>
margin-right: 150px;
<?php endif; ?>
}
.s_static #site_search {
position: relative;
<?php if ($language == 'ltr'): ?>
left: 50%;
margin: 0 0 15px -140px !important;
<?php else: ?>
right: 50%;
margin: 0 -140px 15px 0 !important;
<?php endif; ?>
clear: both;
display: block;
float: none;
width: 280px;
height: 30px;
}
.s_static #site_search input {
width: 220px;
margin-top: -2px;
padding: 5px !important;
}
#system_navigation {
position: relative;
overflow: hidden;
width: 100%;
margin: 10px 0 20px 0;
}
#system_navigation ul.s_list_1 li {
<?php if ($language == 'ltr'): ?>
background-position: 0 -3px !important;
<?php else: ?>
background-position: 100% -3px !important;
<?php endif; ?>
}
#welcome_message {
float: left;
clear: both;
width: 100%;
text-align: center;
font-size: 13px;
}
#cart_menu {
position: static !important;
float: none !important;
margin: 0 0 10px 0 !important;
padding: 10px 0 !important;
text-align: center !important;
border: none !important;
}
#cart_menu .s_submenu {
display: none !important;
}
#cart_menu > a,
#cart_menu > a .s_text,
#cart_menu > a .s_grand_total
{
display: inline-block !important;
float: none !important;
}
#cart_menu .s_grand_total {
position: relative;
}
#system_navigation .s_list_1 {
clear: both;
float: none !important;
height: auto !important;
<?php if ($language == 'ltr'): ?>
padding-right: 17px;
<?php else: ?>
padding-left: 17px;
<?php endif; ?>
text-align: center;
}
#system_navigation .s_list_1 li {
white-space: nowrap;
}
#categories {
float: none !important;
}
#categories > ul > li {
width: 49.99%;
}
#categories > ul > li > a
{
width: 90%;
<?php if ($language == 'ltr'): ?>
padding: 0 10% 0 0;
<?php else: ?>
padding: 0 0 0 10%;
<?php endif; ?>
text-indent: 10px;
}
#categories > ul > li > a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#categories .s_submenu {
display: none !important;
}
#menu_information {
position: static !important;
}
#menu_information:hover .s_submenu {
left: 0 !important;
right: auto !important;
display: block !important;
width: 100% !important;
}
/*** intro ***/
#intro {
clear: both;
margin-bottom: 30px;
padding-top: 30px;
<?php if ($border == '0'): ?>
background: none;
<?php else: ?>
background: url(../images/border/box_border_<?php echo $border; ?>.png) top left repeat-x;
<?php endif; ?>
padding-top: 20px;
}
#intro h2,
#intro h2 *
{
font-size: 22px !important;
line-height: 30px !important;
}
#intro h1 {
padding-bottom: 0;
}
/*** product intro ***/
#product_intro {
overflow: hidden;
width: 300px !important;
height: auto !important;
}
#product_intro #product_intro_preview {
width: 320px;
height: 255px;
right: 0;
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_price_holder {
top: 50px;
<?php if ($language == 'ltr'): ?>
right: 0 !important;
left: auto !important;
<?php else: ?>
left: 0 !important;
right: auto !important;
<?php endif; ?>
}
#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;
}
#product_intro_info {
position: relative;
width: 100%;
min-height: 50px;
margin: 0;
margin-bottom: 255px;
text-align: center;
}
#product_intro_info .s_desc,
#product_intro_info .s_rating_holder
{
display: none;
}
/*** image intro ***/
#image_intro {
width: 280px;
padding-bottom: 20px;
}
#image_intro_preview {
height: auto !important;
margin: 0 !important;
padding: 0;
}
#image_intro_preview.s_boxed {
border-width: 5px;
}
#image_intro_preview img {
max-width: 280px !important;
height: auto !important;
}
#image_intro_preview.s_boxed img {
max-width: 270px !important;
}
#image_intro_preview.s_boxed .s_button_next_holder {
right: -5px;
}
#image_intro_preview.s_boxed .s_button_prev_holder {
left: -5px;
}
/*** footer ***/
#shop_info {
padding-top: 10px;
margin-bottom: 20px;
}
#shop_info_wrap {
padding: 0;
}
#shop_info, #shop_description, #shop_contacts {
font-size: 13px;
}
#twitter li span,
#twitter li span *
{
font-size: 13px !important;
line-height: 20px !important;
}
.s_widget_holder span,
.s_widget_holder span iframe
{
width: 100% !important;
}
#footer_categories .s_wrap {
width: 300px;
}
#footer_categories .s_col_2 {
width: 130px;
}
#footer_categories .s_col_2:nth-child(2n+1) {
clear: left;
}
#footer_categories ul {
font-size: 13px;
}
#footer_nav ul {
margin-bottom: 20px;
}
#payments_types {
float: none !important;
padding-left: 5px;
text-align: center;
}
#payments_types img {
display: inline;
float: none;
}
#copy {
padding: 0 !important;
text-align: center;
}
/*** product listing ***/
#listing_options {
padding-top: 34px;
padding-bottom: 10px;
}
#listing_arrange {
right: auto;
left: 0;
}
#listing_arrange span.s_label {
margin-left: 0;
margin-right: 5px;
}
#listing_arrange .s_switcher
{
margin-left: 0;
margin-right: 15px;
}
#listing_sort {
width: 90px;
}
#compare_total {
display: none;
}
/*** product info ***/
#product_images,
#product_info,
#product .s_tabs
{
margin-left: 0;
margin-right: 0;
}
#product_images:hover {
z-index: 10;
}
#product_gallery .s_thumbs li {
margin: 0 10px 0 0;
padding-bottom: 10px;
}
#product_gallery .s_thumbs img {
width: 55px;
}
#product_info dl {
width: 100%;
}
#product_price {
width: 100px !important;
<?php if ($language == 'ltr'): ?>
margin-right: -20px;
<?php else: ?>
right: auto;
left: -20px;
<?php endif; ?>
padding-left: 0;
padding-right: 0;
background: none;
}
#product_price p.s_price_tax,
#product_price p.s_reward_points
{
display: none;
}
#product .s_tab_box {
padding: 0;
border: none;
}
#product .s_tab_box > h2 {
display: block;
}
#product_share {
display: none;
}
.s_single_col #product_buy_col {
padding-top: 0;
}
/*** brands ***/
#brands td .s_list_1 li {
width: 99%;
}
/*** cart ***/
.cart-content {
width: 100%;
}
.cart-content .s_box_1 input[type=text] {
width: 98%;
}
#quote table {
margin-bottom: 0;
}
/*** checkout ***/
.payment table {
font-size: 12px;
}
.payment td {
padding-bottom: 10px;
}
.payment input[type=text],
.payment input[type=password],
.payment select
{
display: inline-block;
}
/*** login ***/
#login_page .s_h_170 {
height: auto !important;
margin-bottom: 0 !important;
}
#login_page .s_1_2:first-child {
margin-bottom: 30px;
}
/*** orders ***/
#order_details table {
font-size: 11px;
}
#order_details .s_table tr.last td,
#order_details .s_table tr.last td *
{
font-size: 20px !important;
}
/*** returns ***/
#return_request_info table {
font-size: 11px;
}
/*** sitemap ***/
#sitemap .s_list_1 {
column-count: 1;
-moz-column-count: 1;
-webkit-column-count: 1;
-o-column-count: 1;
}
/*** modules ***/
.s_banners .s_banner,
.s_banners .s_banner img {
float: none;
margin: 0 auto 20px auto !important;
}
/*** common styles ***/
select {
max-width: 99% !important;
}
.s_row_2 label {
width: 100%;
}
.s_full {
clear: both;
<?php if ($language == 'ltr'): ?>
margin-left: 0 !important;
<?php else: ?>
margin-right: 0 !important;
<?php endif; ?>
}
.s_list_1 li {
<?php if ($language == 'ltr'): ?>
background-image: url(../images/bullet_1_mobile.png);
background-position: 0 -3px;
<?php else: ?>
background-image: url(../images/rtl/bullet_1_mobile.png);
background-position: 100% -3px;
<?php endif; ?>
}
.s_total.left,
.s_total.right
{
width: auto !important;
clear: none !important;
}
table .s_hidden {
display: block !important;
}
table .s_hidden.inline {
display: inline !important;
}
.s_cell_image {
width: 200px;
}
.s_cell_select {
width: 16px;
}
.s_cell_id {
max-width: 20px;
}
.s_cell_price,
.s_cell_total,
.s_cell_quantity
{
width: 60px;
}
.s_cell_image strong {
display: block;
padding: 5px 0;
text-align: center;
font-size: 14px;
}
.s_cell_select .s_icon_16 {
display: block;
width: 16px;
padding: 0 !important;
text-indent: -1000em;
}
.s_cell_image .s_button_add_to_cart {
font-size: 12px;
}
.s_cell_quantity input[type=text] {
min-width: 90%;
margin-bottom: 10px;
margin-right: 0;
}
#shopping_cart .s_cell_quantity {
display: table-cell !important;
}
.pagination {
text-align: center;
}
.pagination .links {
float: none;
}
.s_listing .s_item {
width: 130px !important;
margin-bottom: 20px !important;
}
.s_listing .s_item .s_thumb {
padding: 0 0 10px 0 !important;
}
.s_listing .s_item h3 {
font-size: 14px;
}
.s_listing .s_item h3 a {
padding-top: 9px;
}
.s_grid_view .s_item:hover {
margin-top: 0;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 20px !important;
padding: 0;
background: none;
box-shadow: none;
-o-box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.s_item .s_actions {
display: block !important;
font-size: 13px !important;
}
.s_subcategory,
.s_grid_view .s_item
{
clear: none !important;
}
.s_subcategory:nth-child(2n+1),
.s_grid_view .s_item:nth-of-type(2n+1)
{
<?php if ($language == 'ltr'): ?>
clear: left !important;
<?php else: ?>
clear: right !important;
<?php endif; ?>
}
.s_submit .s_button_1,
.buttons input[type=submit],
.buttons input[type=button]
{
<?php if ($language == 'ltr'): ?>
float: left;
clear: left;
margin-left: 0;
<?php else: ?>
float: right;
clear: right;
margin-right: 0;
<?php endif; ?>
margin-top: 15px;
}
.s_submit .s_button_1:first-child {
margin-top: 0;
}
.buttons input[type=submit],
.buttons input[type=button],
.buttons button
{
line-height: 30px !important;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-webkit-appearance: none;
}
.s_orders_listing {
<?php if ($language == 'ltr'): ?>
padding-left: 0 !important;
<?php else: ?>
padding-right: 0 !important;
<?php endif; ?>
}
.s_orders_listing .s_col {
float: none;
width: 100% !important;
margin-left: 0 !important;
}
html.s_locked,
html.s_locked body
{
overflow: hidden;
height: 100%;
}
.noty_cont {
position: absolute;
top: 15px;
bottom: 15px;
right: 15px;
left: 15px;
display: none;
width: auto;
height: auto;
margin: 0 !important;
}
html.s_locked .noty_cont {
display: block;
}
.noty_bar,
.noty_message
{
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
margin: 0 !important;
}
.noty_message h3 {
font-size: 15px !important;
}
.noty_buttons {
padding-top: 15px;
text-align: center;
}
.noty_message button {
display: inline-block;
height: 30px;
margin: 0 5px 10px 5px;
padding: 0 10px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 30px;
font-size: 14px;
color: #fff;
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3) inset,
-1px -1px 0 rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3) inset,
-1px -1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3) inset,
-1px -1px 0 rgba(255, 255, 255, 0.3) inset;
-o-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3) inset,
-1px -1px 0 rgba(255, 255, 255, 0.3) inset;
}
.noty_message button:hover,
.noty_message button:hover
{
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) inset,
-1px -1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) inset,
-1px -1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) inset,
-1px -1px 0 rgba(255, 255, 255, 0.5) inset;
-o-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) inset,
-1px -1px 0 rgba(255, 255, 255, 0.5) inset;
}
}
/* ------------------------------------------------------------------------------------- */
/* --- Wide Mobile Layout (480px) ----------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* --- Min width: 480px / Max width: 767px ----------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.s_wrap {
width: 440px;
}
.s_col_3 {
clear: none;
float: left;
width: 220px;
}
.s_row_2 label {
width: 150px;
}
#categories > ul > li {
width: 33.33%;
}
.s_row_2 label,
.s_row_2 input[type="text"],
.s_row_2 input[type="password"],
.s_row_2 textarea,
.s_row_2 select
{
max-width: 240px;
}
#image_intro {
width: 440px;
}
#image_intro_preview img {
max-width: 440px !important;
height: auto !important;
}
#image_intro_preview.s_boxed img {
max-width: 430px !important;
}
/*** footer ***/
#shop_info .s_col_3 {
width: 220px;
}
#twitter {
margin-bottom: 0;
}
#footer_categories .s_wrap {
width: 460px;
}
#footer_categories .s_col_2 {
width: 133px;
}
#footer_categories .s_col_2:nth-child(2n+1) {
clear: none;
}
#footer_categories .s_col_2:nth-child(3n+1),
#footer_nav .s_wrap :nth-of-type(2n+1)
{
<?php if ($language == 'ltr'): ?>
clear: left;
<?php else: ?>
clear: right;
<?php endif; ?>
}
/*** product ***/
#product_images {
width: 280px !important;
<?php if ($language == 'rtl'): ?>
float: right;
<?php endif; ?>
}
#product_info {
clear: none !important;
float: none !important;
width: auto !important;
margin: 0 !important;
}
#product_price {
position: static !important;
<?php if ($language == 'ltr'): ?>
float: left;
margin-left: 10px !important;
<?php else: ?>
float: right;
margin-right: 10px !important;
<?php endif; ?>
padding-bottom: 20px;
}
#product_price .s_price,
.s_single_col #product_price .s_price
{
position: static !important;
}
#product_info dl {
<?php if ($language == 'ltr'): ?>
clear: right;
float: right;
<?php else: ?>
clear: left;
float: left;
<?php endif; ?>
width: 140px !important;
}
#product_info dl dt,
#product_info dl dd
{
width: 100%;
margin-bottom: 0;
}
#product_info dl dd {
clear: left;
margin-bottom: 10px;
}
#product_buy {
clear: both;
width: 440px;
}
/*** brands ***/
#brands td .s_list_1 li {
width: 44%;
}
.s_subcategory {
width: 90px;
}
.s_grid_view .s_item,
.s_grid_view .s_item:hover
{
margin-right: 12px;
margin-left: 11px;
}
.s_subcategory,
.s_subcategory:nth-child(2n+1),
.s_grid_view .s_item,
.s_grid_view .s_item:nth-child(2n+1)
{
clear: none !important;
}
.s_subcategory:nth-child(4n+1),
.s_grid_view .s_item:nth-of-type(3n+1)
{
<?php if ($language == 'ltr'): ?>
clear: left !important;
<?php else: ?>
clear: right !important;
<?php endif; ?>
}
}
/* ------------------------------------------------------------------------------------- */
/* --- Retina displays ----------------------------------------- */
/* --- Overrides styles for devices with a ----------------------------------------- */
/* --- device-pixel-ratio of 2+, such as iPhone 4 --------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
body {
}
}
<?php // endif; ?>
#categories .s_submenu {
width: 200px;
}
#categories .border_eee {
width: 180px;
}
!!!!IMPORTANT!!!!
REPLACE with the following : (restricts variability)
<?php // if ($is_mobile == '0'): ?>
------------------------------------------------------------------------------------- */
/* --- Mobile Layout (320px) ----------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* --- Wide Mobile Layout (480px) ----------------------------------------- */
/* ------------------------------------------------------------------------------------- */
------------------------------------------------------------------------------------- */
/* --- Retina displays ----------------------------------------- */
/* --- Overrides styles for devices with a ----------------------------------------- */
/* --- device-pixel-ratio of 2+, such as iPhone 4 --------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
body {
}
}
<?php // endif; ?>
#categories .s_submenu {
width: 200px;
}
#categories .border_eee {
width: 180px;
}
Cheers Mate.
-
This reply was modified 3888 days ago by tbelnap. Reason: code appearance in post
|
|
This is actually an easier way to accomplish the prior…
DELETE:
/* ------------------------------------------------------------------------------------- */
/* --- 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 {
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; ?>
}
#content {
display: table;
margin: 0 20px;
width: 700px;
}
.s_main_col {
display: table-header-group;
float: none;
}
.s_side_col {
margin: 0;
}
/*** 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,
.s_single_col .s_grid_view.size_2 .s_item
{
clear: none;
}
.s_single_col .s_grid_view.size_2 .s_item:nth-of-type(4n+1),
.s_single_col .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; ?>
And that’s it! Will still resize but only for handheld devices!
|
|
My code is not the same like @tbelnap
My code star this way:
/* ————————————————————————————- */
/* — Tablet portrait layout ——————————————– */
/* ————————————————————————————- */
/* — Min width: 768px / Max width: 991px —————————————– */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.s_cell_quantity {
white-space: nowrap;
}
body {
min-width: 0;
}
body.s_layout_fixed #wrapper {
width: 740px;
}
.s_wrap {
width: 720px;
}
.s_wrap .s_col_12,
.s_main_col
{
width: 700px;
}
.s_side_col {
float: left !important;
float: right !important;
}
.s_col_3 {
width: 340px;
|
|
Hi,
This is because he posted solution for OpenCart version. Delete from:
/* ------------------------------------------------------------------------------------- */
/* --- Mobile layout ----------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* --- Max width: 767px ----------------------------------------- */
Best,
ThemeBurn team
|
|