I know, but as long as the site is under development extreme colors make it easier to track changes. Soon it will be all nice and grey again...
- - - Updated - - -
Hello Andrezao,
The main changes are on the screen-width below 600px (see below). Classipress in a way sets the pic-size to zero when the screen gets to small, so all I did was adjust that and make some .css changes. If you copy what is below into the .css of classipress it should work.
If you rename your current style.css to style1.css and copy my style.css into your website as changed below you can play around with it. If it does not work out just delete the new style.css and rename style1.css back to style.css.
Style.css starting at screen-width 600px all the way to the bottom:
@media screen and (max-width: 600px) {
/* header search box */
#searchform .searchfield {
width: 100%;
padding-bottom: 5px;
}
.header_main_res .adblock {
margin-top:45px;
margin-bottom:-40px;
}
.tabprice div.singletab {
margin: -2px 0 4px 0;
padding: 20px;
padding-left:20px;
background: #FFF;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #ccc;
}
.btn-topsearch {
float: right;
/* button move */
bottom: 0px;
display: block;
margin: 0px 0 5px;
}
#searchform .searchbutcat {
width: 100%;
float: left;
}
.form_search select#scat.searchbar {
min-width: 50%;
max-width: 100%;
float: left;
}
/* button move */
.form_search select#scat.searchbar,
.selectBox-dropdown {
margin: 0 0 54px 0;
}
.searchblock .form_search input#s {
padding: 10px 7px;
}
.post-block .post-left {
max-width: 150px;
}
.content_res img.attachment-ad-thumb {
max-width: 100%;
}
.post-block .post-right,
.post-block .post-right h3 {
float: none;
max-width: 100%;
}
.content_res div.bigright,
.content_res div.bigleft {
float: none;
}
.content_res div.bigright {
width: 100%;
}
.content_res .license {
width: 97%;
}
/* responsive video embeds */
.content_left iframe,
.content_left object,
.content_left embed {
min-height: 225px !important;
min-width: 200px !important;
height: 100% !important;
width: 100% !important;
}
/* footer widgets */
/* go to 1 wide */
.footer_main_res div.column {
width: 85.106383%;
/* 800px / 960px */
}
/* recaptcha */
#recaptcha_widget_div {
margin-left: 0;
}
.form_step fieldset .form-field input[type="text"],
.form_step input.text,
.form_edit input.text,
.form_step textarea,
.form_edit textarea {
width: 94%;
}
.form_edit input.text,
.form_edit select,
.form_edit textarea,
.form_step ol .form-fields input,
.form_step ol .form-fields select,
.form_step ol .form-fields textarea,
.form_step ol .form-fields .ad-static-field {
margin: 0;
}
.form_step p.btn1,
.form_step .labelwrapper label,
.form_edit .labelwrapper label {
margin-left: 0;
}
.form_step .button-container, #app-attachment-upload-container,
.form_step li.withborder {
margin-left: 0;
width: auto;
}
}
@media screen and (max-width: 400px) {
.searchfield {
width: 248px;
}
.post-block .post-left {
width:0px;
}
.content_res div.bigleft {
max-width:100%;
height:auto;
float:none;
}
.flex-direction-nav a {
width:0;
height:0;
}
p.post-price {
width:100%;
margin-top:-20px;
color: #ffff00;
font-size: 25px;
font-weight: bold;
float:left;
text-shadow:1px 1px 1px #490101;
}
.searchblock {
max-height:90px;
border: 2px solid #fff779;
}
#searchform .searchbutcat {
width: 100%;
float: right;
}
.post-block {
border: 2px solid #fff779;
box-shadow: none;
}
h1.single-listing {
font-size:16px;
max-width:99%;
padding-top:25px;
margin-bottom:-20px;
}
.twoCol#directory .catcol {
width: 100%;
}
.post-block .post-right h3 {
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
line-height:1.35;
padding:5px;
text-align:center;
background:#eee;
border-radius:2px;
border:1px solid #aaa;
}
.header_main_res #logo {
margin-top:-20px;
margin-bottom: -53px;
}
.selectBox-dropdown {
min-width: 250px;
max-width: 250px;
}
.text {
width: 240px;
}
.header_menu_res .obtn {
padding: 4px 10px;
}
#directory .catcol ul li.cat-item ul,
.paging .pages span.total,
.slider_top,
.post-block .post-left img {
width:300px;
height: auto;
margin-bottom:15px;
margin-top:55px;
border:0;
padding:0;
}
.post-block .post-right h3 {
max-width: 99%;
float: none;
margin-top:-20px;
}
.tabcontrol ul.tabnavig li a {
padding: 5px;
}
.content_right ul.ads li {
max-width: 41.1184211%;
/* 125px/304px */
margin-right: 3.6184211%!important;
/* 11px/304px */
}
.content_right ul.ads li.alt {
float: right;
}
/* edit profile page */
table.form-table th,
table.form-table td {
display: block;
padding-left: 0;
text-align: left;
}
select#display_name {
min-width: 240px;
}
.form-table input.regular-text,
#pass-strength-result {
max-width: 89%;
}
.form_step .app-attachment span,
.form_edit .app-attachment span {
float: left;
}
.form_step .button-container,
#app-attachment-upload-container,
.form_step fieldset .form-field {
width: 100%;
margin-left: 0;
}
.form_step .labelwrapper label,
.form_edit .labelwrapper label {
float: left;
}
.helpico,
.tip .helpico {
float: right;
}
.content_right div.user {
padding: 0;
}
.form_step li.withborder {
margin: 0;
padding: 5px;
width: 94%;
}
/* break long words/urls with line breaks */
p {
word-wrap: break-word;
font-size:13px;
}
/* recaptcha */
#recaptcha_widget_div {
margin: 0 -16px;
}
}
@media screen and (max-width: 320px) {
.tabcontrol ul.tabnavig li a.selected {
padding: 5px 5px 6px;
}
#directory .catcol ul li.cat-item ul,
.slider_top {
display: none;
}
.searchfield {
width: 235px;
}
.selectBox-dropdown {
min-width: 240px;
max-width: 240px;
}
.content_res div.bigleft {
width: 95%;
}
/* recaptcha */
#recaptcha_widget_div {
margin: 0 -40px;
}
}
@media screen and (max-width: 240px) {
.tabcontrol ul.tabnavig li:nth-child(3),
.tabprice ul.tabnavig li:nth-child(3) {
display: none;
}
.header_menu_res .obtn {
float: left;
}
.searchfield {
width: 158px;
}
.selectBox-dropdown {
min-width: 166px;
max-width: 166px;
}
.form_step input.text,
.form_edit input.text,
.form_step textarea,
.form_edit textarea {
width: 90%;
}
.form_step li.withborder {
width: 90%;
}
.content_res div.bigleft {
width: 95%;
}
/* responsive video embeds */
.content_left iframe,
.content_left object,
.content_left embed {
margin: 0 -16px !important;
}
Have fun, let me know if you need help.
Frank
1Likes
Reply With Quote