Results 1 to 5 of 5
Like Tree1Likes
  • 1 Post By adtractiebv

Thread: Pics on mobile devides

  1. #1
    Thread Starter
    adtractiebv's Avatar
    Join Date
    Jul 2014
    Location
    Netherlands
    Posts
    100
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Pics on mobile devides

    Hello all,

    It took me a few hours to get it done, but getting large pics on the homepage of the mobile version of a Classipress website is not all that complex.

    Website: www.okaysions.nl

    Theme: Classipress
    Child: none

    Plugins used:

    Ads tagger
    WP user avatar
    Sorted ads
    Slider ultimate
    Scroll back to top (WP plugin)
    Remove price tag
    Hide widgets on mobile
    Favorite ads
    Custom taxonomy order (WP plugin)
    CP tabber
    Cookie law info (WP plugin)
    Feature me
    More memberships
    Bump Ad
    Ad social
    Post an ad widget
    Motivate mails
    Ad to any (WP plugin)
    ACF smart tags

    Payment-gateway: Pronamic iDeal plugin

    Banners: served through our own adserver (no Adsense)

    Still need to put the invoices in. Also on screens between mobile and tablet-size I still have some smaller issues to address.

    All apps work correctly as far as I can tell. Just one slight error left in Slider Ultimate and some colors and borders to change. The ads on the website at this moment are all for testing purposes, the website is set to go live on January 20th.

    Comments are welcome.

    Frank

  2. #2
    Expired Customer andrezao's Avatar
    Join Date
    Aug 2015
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    How do you leave the big photos? Could you leave some tips?

    Best Regards

  3. #3
    Marketplace Seller dalemiles's Avatar
    Join Date
    Feb 2016
    Location
    New Zealand
    Posts
    535
    Thanks
    2
    Thanked 111 Times in 95 Posts
    Nice work on the customisation, but you really need to work on the colours.
    I can't look at the site for too long before that colour scheme hurts my eyes.
    If my post was helpful in anyway, please give it a like or a thank you.
    DaleMiles aka SpamUser


    Current Plugins:
    Vantage 4 - Custom Map Pins NEW! Support Forum waiting for setup
    ClassiPress - User Last Active/Online NEW! Support Forum waiting for setup
    ClassiPress - Classipress Comment Notifications [support]
    ClassiPress - FrontPage Ads [support]
    ClassiPress - User Feedback & User Search [support]
    ClassiPress - Dashboard Filter & Search [support]

    Vantage 3.x - Video Embed [support]
    Vantage 3.x - Custom Map Pins [support]

    You can create a successful classified site with Classipress. See my bespoke ClassiPress site here.

  4. #4
    Thread Starter
    adtractiebv's Avatar
    Join Date
    Jul 2014
    Location
    Netherlands
    Posts
    100
    Thanks
    1
    Thanked 4 Times in 4 Posts
    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
    dalemiles likes this.

  5. #5
    Thread Starter
    adtractiebv's Avatar
    Join Date
    Jul 2014
    Location
    Netherlands
    Posts
    100
    Thanks
    1
    Thanked 4 Times in 4 Posts
    Colors are changed now, and come Monday the website will be launched. Hopefully the scheme doen not create too many headaches...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Opload more than 10 pics
    By papepape in forum ClassiPress General Discussion
    Replies: 2
    Last Post: November 21st, 2015, 05:46 PM
  2. Thumbnail pics
    By aj270303 in forum Vantage General Discussion (Legacy)
    Replies: 0
    Last Post: May 14th, 2014, 01:32 AM
  3. cant see gallery pics
    By terrylock in forum Vantage General Discussion (Legacy)
    Replies: 7
    Last Post: December 30th, 2013, 01:39 PM
  4. Add more pics
    By dandan in forum ClassiPress General Discussion
    Replies: 9
    Last Post: April 1st, 2013, 04:38 AM
  5. Formatting when more than 5 pics
    By annonse in forum Vantage General Discussion (Legacy)
    Replies: 3
    Last Post: August 24th, 2012, 03:38 PM