hello frosticek

 i have car attributes installed and its seems to be working good . i am just trying to make the layout abit nicer for the theme.

i created div to surround all the other divs and put this is the css file

.__200 { height: 220px; /*your fixed height*/-moz-column-count: 3; -moz-column-gap: 80px; -webkit-column-count: 3; -webkit-column-gap: 80px; display: inline-block;
 }

which make the layout alot neater  but a problem when on smaller screens 

so i replaces the above  with 

/* Car Attributes responsive  */
@media screen and (max-width: 1024px;) and (max-width: 1200px){
  .__200 { height: 220px; /*your fixed height*/-moz-column-count: 3; -moz-column-gap: 80px; -webkit-column-count: 3; -webkit-column-gap: 80px; display: inline-block;
 }
}

i am still learning and usually i figure it out but i have never been able to get @media to work.

thanks for the help
Chris

@aweegander
You cannot use max-width twice:
@media screen and (max-width: 1024px;) and (max-width: 1200px){

Maybe you wanted:
@media screen and (min-width: 1024px;) and (max-width: 1200px){
I would recommend to check file:
oc-content/themes/zara/css/responsive.css

You can find different media styles here for different screensize.

hey sorry i posted the wrong piece of code although i have try different ways . i started with @media screen and (min-width: 800px;) then moved on to @media screen and (min-width: 1024px;) and @media not screen and (max-width: 1024px;) and (max-width: 1200px){

although the last one doesnt make much sense to me i tried it anyway but none seem to work.

i cant look at the zara css as im on patricia or is that what you mean ??

thanks

Thank you Frosticek

things become alot easier when someone shines a torch in the right direction 

 would you know how to make required the sections make , model,  model type and engine size.

 i tried using a javascript but i mustnt have it set right

<script type="text/javascript">
 $(document).ready(function(){
 $('select#pc_make').prop('required', true);
 $('select#pc_model').prop('required', true);
 $('select#pc_car_type').prop('required', true);
 $('input#i_engine_size').prop('required', true);
 });
</script>
here is my edit_item.php

<script type="text/javascript">
    $(document).ready(function(){
        $("#make").change(function(){
            var make_id = $(this).val();
            var url = '<?php echo osc_ajax_plugin_url('cars_attributes/ajax.php') . '&makeId='; ?>' + make_id;
            var result = '';
            if(make_id != '') {
                $("#model").attr('disabled',false);
                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: 'json',
                    success: function(data){
                        var length = data.length;
                        if(length > 0) {
                            result += '<option value="" selected><?php _e('Select a model', 'cars_attributes'); ?></option>';
                            for(key in data) {
                                result += '<option value="' + data[key].pk_i_id + '">' + data[key].s_name + '</option>';
                            }
                        } else {
                            result += '<option value=""><?php _e('No results', 'cars_attributes'); ?></option>';
                        }
                        $("#model").html(result);
                    }
                 });
             } else {
                result += '<option value="" selected><?php _e('Select a model', 'cars_attributes'); ?></option>';
                $("#model").attr('disabled',true);
                $("#model").html(result);
             }
        });
    });
</script>
<h2><?php _e('Car details', 'cars_attributes') ; ?></h2>
<div>
<div class="__200">
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_make') != '' ) {
                $detail['fk_i_make_id'] = Session::newInstance()->_getForm('pc_make');
            }
        ?>
        <label><?php _e('Make', 'cars_attributes'); ?></label>
        <select name="make" id="make" >
            <option value=""><?php _e('Select a make', 'cars_attributes'); ?></option>
            <?php foreach($makes as $a){ ?>
            <option value="<?php echo $a['pk_i_id']; ?>" <?php if(@$detail['fk_i_make_id'] == $a['pk_i_id']) { echo 'selected'; } ?>><?php echo $a['s_name']; ?></option>
            <?php } ?>
        </select>
    </div>
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_model') != '' ) {
                $detail['fk_i_model_id'] = Session::newInstance()->_getForm('pc_model');
            }
        ?>
        <label><?php _e('Model', 'cars_attributes'); ?></label>
        <select name="model" id="model">
            <option value="" selected><?php _e('Select a model', 'cars_attributes'); ?></option>
            <?php foreach($models as $a) { ?>
            <option value="<?php echo $a['pk_i_id']; ?>" <?php if(@$detail['fk_i_model_id'] == $a['pk_i_id']) { echo 'selected'; } ?>><?php echo $a['s_name']; ?></option>
            <?php } ?>
        </select>
    </div>
    <div class="row _200">
        <?php $locales = osc_get_locales();
        if( Session::newInstance()->_getForm('pc_car_type') != '' ) {
            $detail['fk_vehicle_type_id'] = Session::newInstance()->_getForm('pc_car_type');
        }
        if(count($locales)==1) {
            $locale = $locales[0]; ?>
            <p>
                <label><?php _e('Car type', 'cars_attributes'); ?></label>
                <select name="car_type" id="car_type">
                    <option value="" selected><?php _e('Select a car type', 'cars_attributes'); ?></option>
                    <?php foreach($car_types[$locale['pk_c_code']] as $k => $v) { ?>
                    <option value="<?php echo  $k; ?>" <?php if(@$detail['fk_vehicle_type_id'] == $k) { echo 'selected'; } ?>><?php echo @$v; ?></option>
                    <?php } ?>
                </select>
            </p>
        <?php } else { ?>
            <div class="tabber">
            <?php foreach($locales as $locale) {?>
                <div class="tabbertab">
                    <h2><?php echo $locale['s_name']; ?></h2>
                    <p>
                        <label><?php _e('Car type', 'cars_attributes'); ?></label>
                        <select name="car_type" id="car_type">
                            <option value="" selected><?php _e('Select a car type', 'cars_attributes'); ?></option>
                            <?php foreach($car_types[$locale['pk_c_code']] as $k => $v) { ?>
                            <option value="<?php echo  $k; ?>" <?php if(@$detail['fk_vehicle_type_id'] == $k) { echo 'selected'; } ?>><?php echo @$v; ?></option>
                            <?php } ?>
                        </select>
                    </p>
                </div>
            <?php } ?>
            </div>
        <?php } ?>
    </div>
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_year') != '' ) {
                $detail['i_year'] = Session::newInstance()->_getForm('pc_year');
            }
        ?>
        <label><?php _e('Year', 'cars_attributes'); ?></label>
        <input type="text" name="year" id="year" value="<?php echo @$detail['i_year']; ?>" size=4 />
    </div>
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_mileage') != '' ) {
                $detail['i_mileage'] = Session::newInstance()->_getForm('pc_mileage');
            }
        ?>
        <label><?php _e('Mileage', 'cars_attributes'); ?></label>
        <input type="text" name="mileage" id="mileage" value="<?php echo @$detail['i_mileage']; ?>" />
    </div>
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_engine_size') != '' ) {
                $detail['i_engine_size'] = Session::newInstance()->_getForm('pc_engine_size');
            }
        ?>
        <label><?php _e('Engine size (cc)', 'cars_attributes'); ?></label>
        <input type="text" name="engine_size" id="engine_size" value="<?php echo @$detail['i_engine_size']; ?>" />
    </div>
    <div class="row _200" >
        <?php if( Session::newInstance()->_getForm('pc_gears') != '' ) {
                $detail['i_gears'] = Session::newInstance()->_getForm('pc_gears');
            }
        ?>
        <label><?php _e('Gears', 'cars_attributes'); ?></label>
        <select name="gears" id="gears" style="float: right;">
<option value=""><?php _e('Select num. of gears', 'cars_attributes'); ?></option>
        <?php foreach(range(1, 8) as $n) { ?>
            <option value="<?php echo $n; ?>" <?php if(@$detail['i_gears'] == $n) { echo 'selected'; } ?>><?php echo $n; ?></option>
        <?php } ?>
        </select>
    </div>
     <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_doors') != '' ) {
                $detail['i_doors'] = Session::newInstance()->_getForm('pc_doors');
            }
        ?>
        <label><?php _e('Doors', 'cars_attributes'); ?></label>
        <select name="doors" id="doors">
<option value=""><?php _e('Select num. of doors', 'cars_attributes'); ?></option>
        <?php foreach(range(3, 5) as $n) { ?>
            <option value="<?php echo $n; ?>" <?php if(@$detail['i_doors'] == $n) { echo 'selected'; } ?>><?php echo $n; ?></option>
        <?php } ?>
        </select>
    </div>
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_seats') != '' ) {
                $detail['i_seats'] = Session::newInstance()->_getForm('pc_seats');
            }
        ?>
        <label><?php _e('Seats', 'cars_attributes'); ?></label>
        <select name="seats" id="seats">
<option value=""><?php _e('Select num. of seats', 'cars_attributes'); ?></option>
            <?php foreach(range(1, 17) as $n) { ?>
            <option value="<?php echo $n; ?>" <?php if(@$detail['i_seats'] == $n) { echo 'selected'; } ?>><?php echo $n; ?></option>
            <?php } ?>
        </select>
    </div>
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_transmission') != '' ) {
                $detail['e_transmission'] = Session::newInstance()->_getForm('pc_transmission');
            }
        ?>
        <label><?php _e('Transmission', 'cars_attributes'); ?></label>
        <select name="transmission" id="transmission">
            <option value="MANUAL" <?php if(@$detail['e_transmission'] == 'MANUAL') { echo 'selected'; } ?>><?php _e('Manual', 'cars_attributes'); ?></option>
            <option value="AUTO" <?php if(@$detail['e_transmission'] == 'AUTO') { echo 'selected'; } ?>><?php _e('Auto', 'cars_attributes'); ?></option>
        </select>
    </div>
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_fuel') != '' ) {
                $detail['e_fuel'] = Session::newInstance()->_getForm('pc_fuel');
            }
        ?>
        <label><?php _e('Fuel', 'cars_attributes'); ?></label>
        <select name="fuel" id="fuel">
            <option value="DIESEL" <?php if(@$detail['e_fuel'] == 'DIESEL') { echo 'selected'; } ?>><?php _e('Diesel', 'cars_attributes'); ?></option>
            <option value="GASOLINE" <?php if(@$detail['e_fuel'] == 'GASOLINE') { echo 'selected'; } ?>><?php _e('Petrol', 'cars_attributes'); ?></option>
            <option value="ELECTRIC-HIBRID" <?php if(@$detail['e_fuel'] == 'ELECTRIC-HIBRID') { echo 'selected'; } ?>><?php _e('Electric-hibrid', 'cars_attributes'); ?></option>
            <option value="OTHER" <?php if(@$detail['e_fuel'] == 'OTHER') { echo 'selected'; } ?>><?php _e('Other', 'cars_attributes'); ?></option>
        </select>
    </div>
    <div class="row _200">
        <?php
            if( Session::newInstance()->_getForm('pc_seller') != '' ) {
                $detail['e_seller'] = Session::newInstance()->_getForm('pc_seller');
            }
        ?>
        <label><?php _e('Seller', 'cars_attributes'); ?></label>
        <select name="seller" id="seller">
            <option value="DEALER" <?php if(@$detail['e_seller'] == 'DEALER') { echo 'selected'; } ?>><?php _e('Dealer', 'cars_attributes'); ?></option>
            <option value="OWNER" <?php if(@$detail['e_seller'] == 'OWNER') { echo 'selected'; } ?>><?php _e('Owner', 'cars_attributes'); ?></option>
        </select>
    </div>
</div>
<script type="text/javascript">
 $(document).ready(function(){
 $('select#pc_make').prop('required', true);
 $('select#pc_model').prop('required', true);
 $('select#pc_car_type').prop('required', true);
 $('input#i_engine_size').prop('required', true);
 });
</script>
<script type="text/javascript">
    tabberAutomatic();
</script>

@aweegander
I do not think it will work, as those elements does not exist when page is loaded.

No problem thanks anyway

@aweegander
It might work if you would rework it into setTimeout function.
It would call this code, let's say every 3 seconds. Once it appears on site, correct classes would be added.
Of course condition to check if element exists and if it does not have that class already would be good.

Most of what you just said went right over my head    but i will search it out and see what i can do

thanks i will  post  back if and when i figure it out .