Hola buenos días a todos soy nuevo en todo esto del diseño web estoy diseñando un sitio web con Artisteer 4,2 pero tengo un pequeño problema con el diseño responsive de la pagina. Tiene 3 columnas una central con todo el contenido básico del sitio y dos columnas más una a cada lado. Por debajo de 980px la columna de la derecha se sitúa por debajo de la columna central y la columna de la izquierda que tiene su menú de navegación por encima de la columna central. Que modificaciones tendría que hacer en el codigo para que por debajo de de 980px la columna de la derecha desapareciera por tener contenido de poca relevancia y aun permaneciera la columna de la izquierda en su sitio con su menú de navegación pero que por debajo de 768px la columna de la izquierda pasara debajo de la columna central de contenido. Espero puedan ayudarme a resolver dicho dilema.
/* Created by Artisteer v4.2.0.60623 */
.responsive body
{
min-width: 240px;
}
.responsive img
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.responsive .art-content-layout img,
.responsive .art-content-layout video
{
max-width: 100%;
height: auto !important;
}
.responsive.responsive-phone .art-content-layout img
{
margin: 1%;
}
.responsive.responsive-phone .art-collage,
.responsive.responsive-tablet .art-collage {
margin: 0 !important;
}
.responsive .art-content-layout .art-sidebar0,
.responsive .art-content-layout .art-sidebar1,
.responsive .art-content-layout .art-sidebar2
{
width: auto !important;
}
.responsive .art-content-layout,
.responsive .art-content-layout-row,
.responsive .art-layout-cell
{
padding: 0;
display: block;
}
.responsive .image-caption-wrapper
{
width: auto;
}
.responsive.responsive-tablet .art-vmenublock,
.responsive.responsive-tablet .art-block
{
margin-left: 1%;
margin-right: 1%;
width: 48%;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.responsive .art-responsive-embed
{
height: 0;
padding-bottom: 56.25%;
/* 16:9 */
position: relative;
}
.responsive .art-responsive-embed iframe,
.responsive .art-responsive-embed object,
.responsive .art-responsive-embed embed
{
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.responsive .art-sheet
{
width: auto !important;
min-width: 240px !important;
max-width: none !important;
margin-right: 1% !important;
margin-left: 1% !important;
}
#art-resp {
display: none;
}
@media all and (max-width: 999px)
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
}
@media all and (max-width: 480px)
{
#art-resp, #art-resp-m { display: block; }
#art-resp-t { display: none; }
}
#art-resp-desktop {
display: none;
}
#art-resp-tablet-landscape {
display: none;
}
#art-resp-tablet-portrait {
display: none;
}
#art-resp-phone-landscape {
display: none;
}
#art-resp-phone-portrait {
display: none;
}
@media (min-width: 1200px)
{
#art-resp-desktop { display: block; }
}
@media (min-width: 980px) and (max-width: 1199px)
{
#art-resp-tablet-landscape { display: block; }
}
@media (min-width: 768px) and (max-width: 979px)
{
#art-resp-tablet-portrait { display: block; }
}
@media (min-width: 480px) and (max-width: 767px)
{
#art-resp-phone-landscape { display: block; }
}
@media (max-width: 479px)
{
#art-resp-phone-portrait { display: block; }
}
.responsive .art-header
{
width: auto !important;
max-width: none !important;
min-height: 100px !important;
min-width: 0 !important;
text-align: center;
}
.default-responsive .art-header
{
height: auto;
}
.default-responsive .art-header *
{
position: relative;
text-align: center;
-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
.default-responsive .art-header .art-headline,
.default-responsive .art-header .art-slogan
{
display: block !important;
top: 0 !important;
left: 0 !important;
margin: 2% !important;
text-align: center !important;
}
.default-responsive .art-header .art-headline a,
.default-responsive .art-header .art-slogan
{
white-space: normal !important;
}
.default-responsive .art-header .art-logo
{
display: inline-block;
margin: auto !important;
left: auto;
top: auto !important;
width: auto;
height: auto;
}
.responsive .art-header .art-slidenavigator
{
position: absolute;
}
.default-responsive .art-header .art-positioncontrol
{
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: auto;
height: auto;
margin: auto;
}
.responsive .art-header #art-flash-area
{
display: none;
}
/* Search and other elements in header element directly */
.default-responsive .art-header>.art-textblock
{
position: relative !important;
display: block !important;
margin: 1% auto !important;
width: 75% !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
}
.default-responsive .art-header .art-textblock
{
position: relative !important;
display: block !important;
margin: auto !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
height: auto !important;
width: auto;
background-image: none;
}
/* '.art-header *' used noram align, but for '.art-textblock *' we must force align because of preview */
.responsive .art-header .art-textblock *
{
text-align: center !important;
}
.default-responsive .art-header .art-shapes > .art-textblock,
.default-responsive .art-header .art-slide-item > .art-textblock
{
display: none !important;
}
.default-responsive .art-header .art-shapes > .art-textblock *
{
text-align: center !important;
width: auto !important;
height: auto !important;
display: block;
}
.default-responsive .art-header .art-slider .art-textblock *
{
text-align: center !important;
width: auto !important;
height: auto !important;
display: block;
}
/* For icons like facebook, rss, etc. */
.responsive .art-header>.art-textblock>div
{
width: 100%;
}
.responsive .art-content-layout,
.responsive .art-content-layout-row,
.responsive .art-layout-cell
{
display: block;
}
.responsive .art-layout-cell
{
width: auto !important;
height: auto !important;
}
.responsive .art-content-layout:after,
.responsive .art-content-layout-row:after,
.responsive .art-layout-cell:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.responsive ul.art-vmenu>li>ul
{
padding: 5px;
display: none;
}
.responsive ul.art-vmenu>li>ul:before
{
display: block;
position: absolute;
content: ' ';
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.responsive ul.art-vmenu>li>ul.vmenu-resp-popup-visible
{
display: block;
}
.responsive ul.art-vmenu ul {
position: relative;
left: auto;
top: auto;
visibility: visible;
}
.responsive ul.art-vmenu ul ul a
{
padding-left: 50px;
}
.responsive ul.art-vmenu ul ul ul a
{
padding-left: 75px;
}
.responsive ul.art-vmenu ul ul ul ul a
{
padding-left: 100px;
}
.responsive ul.art-vmenu ul ul ul ul ul a
{
padding-left: 125px;
}
.responsive .art-post
{
border-radius: 0;
}
.responsive .art-footer-inner
{
min-width: 0;
}
.responsive .responsive-tablet-layout-cell
{
width: 50% !important;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.responsive .responsive-layout-row-3 .responsive-tablet-layout-cell
{
width: 33.33% !important;
}
