1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Sidebar widget width

Discussion in 'CSS' started by dona70, Mar 14, 2016.

  1. #1
    I can't get the sidebar and widgets in it to settle right.
    Page is:
    http://toivalanurheilijat.fi/uusi/
    The backgrounds of the widgets are too wide or the text areas aren't wide enough.
    Here is css-code:
    #sidebar {
    color: rgb(153, 153, 153);
    float: right;
    margin-top: 3px;
    padding: 0 11px 0 39px;
    width: 300px;
    word-wrap: break-word;
    }

    #sidebar .widget {
    background: rgba(239, 239, 239, .4);
    margin-bottom: 30px;
    }
    SEMrush
    #sidebar .widget_text {
    padding: 5px 31px 27px;
    width: 300px;
    }
     
    dona70, Mar 14, 2016 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,225
    Likes Received:
    1,245
    Best Answers:
    22
    Trophy Points:
    400
    #2
    Just make it fluid, then you won't have to worry how much space it make take. Remove width: 300px; from your #sidebar and add width: 100%; max-width: 300px; instead. And then remove width: 300px; from #sidebar .widget_text altogether.
     
    qwikad.com, Mar 14, 2016 IP
  3. dona70

    dona70 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    It helped, but still for example widget's title is too narrow. I would like the blue title box be as wide as the widget.
    Here is css:

    #sidebar {
    color: rgb(153, 153, 153);
    float: right;
    margin-top: 3px;
    padding: 0 11px 0 39px;
    width: 100%;
    max-width: 300px;
    word-wrap: break-word;
    }

    #sidebar .widget {
    background: rgba(239, 239, 239, .4);
    margin-bottom: 30px;
    }

    #sidebar .widget_text {
    padding: 5px 31px 27px;
    }

    #sidebar .widget_text h2:first-child {
    left: -31px;
    position: relative;
    top: -5px;
    }
     
    dona70, Mar 15, 2016 IP
  4. dona70

    dona70 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Well, I solved the problem otherwise: I reduced the sidebar max width into 260px, so now it looks allright.
     
    dona70, Mar 15, 2016 IP
  5. dona70

    dona70 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Actually, it isn't right, yet.
    For example, the widget's "Yhteistyökumppanit" title goes into two row, so the sidebar and widget should be wider.
    I can get the sidebar wider, but not the widget.
     
    dona70, Mar 15, 2016 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,178
    Likes Received:
    1,728
    Best Answers:
    239
    Trophy Points:
    515
    #6
    Well, there's a LOT wrong with that page -- from the massive images too blasted big to have any business as presentational backgrounds on a website in the first place, to the illegible colour contrasts caused by transparencies, to px metric fonts, pixel metric layouts, zero graceful degradation plan, and that's BEFORE I even look under the hood at your problem.

    Popping the bonnet to eyeball the code, well... no surprised it's such a mess; turdpress. Thought I smelled something funky... all the telltales of letting the "off the shelf solution" just go ahead and piss out a website any-old-way. Static scripting in the markup, pointless use of scripting, static style in the markup, little if anything resembling logical document structure or semantic markup -- This ALONE:

    
    <link rel='stylesheet' id='bxslider-css-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/kiwi-logo-carousel/third-party/jquery.bxslider/jquery.bxslider.css?ver=4.4.2' type='text/css' media='' />
    <link rel='stylesheet' id='kiwi-logo-carousel-styles-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/kiwi-logo-carousel/custom-styles.css?ver=4.4.2' type='text/css' media='' />
    <link rel='stylesheet' id='bbp-default-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/bbpress/templates/default/css/bbpress.css?ver=2.5.8-5815' type='text/css' media='screen' />
    <link rel='stylesheet' id='document-gallery-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/document-gallery/assets/css/style.min.css?ver=4.1.14' type='text/css' media='all' />
    <link rel='stylesheet' id='font-awesome-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/download-manager/assets/font-awesome/css/font-awesome.min.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='wpdm-bootstrap-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/download-manager/assets/bootstrap/css/bootstrap.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='wpdm-front-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/download-manager/assets/css/front.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='dashicons-css'  href='http://toivalanurheilijat.fi/uusi/wp-includes/css/dashicons.min.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='al_product_styles-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/ecommerce-product-catalog/css/al_product.css?1457368536&#038;ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='colorbox-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/ecommerce-product-catalog/js/colorbox/colorbox.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='social-widget-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/social-media-widget/social_widget.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='wpba_front_end_styles-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-better-attachments/assets/css/wpba-frontend.css?ver=1.3.11' type='text/css' media='all' />
    <link rel='stylesheet' id='wordpress-file-upload-style-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-file-upload/css/wordpress_file_upload_style_relaxed.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='wordpress-file-upload-style-safe-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-file-upload/css/wordpress_file_upload_style_safe_relaxed.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='jquery-ui-css-css'  href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='jquery-ui-timepicker-addon-css-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-file-upload/vendor/datetimepicker/jquery-ui-timepicker-addon.min.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='bootstrap-css-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-quick-front-end-editor/css/bootstrap.min.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='buttons-css'  href='http://toivalanurheilijat.fi/uusi/wp-includes/css/buttons.min.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='mediaelement-css'  href='http://toivalanurheilijat.fi/uusi/wp-includes/js/mediaelement/mediaelementplayer.min.css?ver=2.18.1' type='text/css' media='all' />
    <link rel='stylesheet' id='wp-mediaelement-css'  href='http://toivalanurheilijat.fi/uusi/wp-includes/js/mediaelement/wp-mediaelement.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='media-views-css'  href='http://toivalanurheilijat.fi/uusi/wp-includes/css/media-views.min.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='imgareaselect-css'  href='http://toivalanurheilijat.fi/uusi/wp-includes/js/imgareaselect/imgareaselect.css?ver=0.9.8' type='text/css' media='all' />
    <link rel='stylesheet' id='logooos-style-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp_logooos_plugin/css/logos.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='progression-style-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/themes/progression/style.css?ver=4.4.2' type='text/css' media='all' />
    <!--[if lt IE 9]>
    <link rel='stylesheet' id='progression-style-old-ie-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/themes/progression/ie/ie.css?ver=4.4.2' type='text/css' media='all' />
    <![endif]-->
    <link rel='stylesheet' id='simcal-qtip-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/google-calendar-events/assets/css/vendor/jquery.qtip.min.css?ver=2.2.1' type='text/css' media='all' />
    <link rel='stylesheet' id='simcal-default-calendar-grid-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/google-calendar-events/assets/css/default-calendar-grid.min.css?ver=3.0.14' type='text/css' media='all' />
    <link rel='stylesheet' id='simcal-default-calendar-list-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/google-calendar-events/assets/css/default-calendar-list.min.css?ver=3.0.14' type='text/css' media='all' />
    <link rel='stylesheet' id='sccss_style-css'  href='http://toivalanurheilijat.fi/uusi?sccss=1&#038;ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='jetpack_css-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/jetpack/css/jetpack.css?ver=3.9.2' type='text/css' media='all' />
    <link rel='stylesheet' id='amr-ical-events-list-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/amr-ical-events-list/css/icallist.css?ver=1' type='text/css' media='all' />
    <link rel='stylesheet' id='amr-ical-events-list_print-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/amr-ical-events-list/css/icalprint.css?ver=1' type='text/css' media='print' />
    <link rel='stylesheet' id='supersized-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-supersized/css/supersized.css?ver=4.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='supersized_theme_css-css'  href='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-supersized/theme/supersized.shutter.css?ver=4.4.2' type='text/css' media='all' />
    		<script type="text/javascript">
    			ajaxurl = typeof(ajaxurl) !== 'string' ? 'http://toivalanurheilijat.fi/uusi/wp-admin/admin-ajax.php' : ajaxurl;
    		</script>
    		<script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/download-manager/assets/bootstrap/js/bootstrap.min.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/download-manager/assets/js/front.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/download-manager/assets/js/chosen.jquery.min.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/ecommerce-product-catalog/js/colorbox/jquery.colorbox-min.js?ver=4.4.2'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var product_object = {"ajaxurl":"http:\/\/toivalanurheilijat.fi\/uusi\/wp-admin\/admin-ajax.php","lightbox_settings":{"transition":"elastic","initialWidth":200,"maxWidth":"90%","maxHeight":"90%","rel":"gal"}};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/ecommerce-product-catalog/js/product.js?1457368536&#038;ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/useful-banner-manager/scripts.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-file-upload/js/json2.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-file-upload/js/wordpress_file_upload_functions.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-quick-front-end-editor/js/bootstrap.min.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-quick-front-end-editor/js/jquery.hotkeys.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-quick-front-end-editor/js/bootstrap-wysiwyg.js?ver=4.4.2'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var laAjax = {"url":"http:\/\/toivalanurheilijat.fi\/uusi\/wp-admin\/admin-ajax.php"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-quick-front-end-editor/js/script.js?ver=4.4.2'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var userSettings = {"url":"\/uusi\/","uid":"0","time":"1458344005","secure":""};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-includes/js/utils.min.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-includes/js/plupload/plupload.full.min.js?ver=2.1.8'></script>
    <!--[if lt IE 8]>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-includes/js/json2.min.js?ver=2015-05-03'></script>
    <![endif]-->
    <script type='text/javascript'>
    /* <![CDATA[ */
    var progression_localize = {"chooseFile":"Choose file...","fileIsNot":"File is not selected."};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/themes/progression/js/script.js?ver=4.4.2'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-supersized/js/jquery.easing.min.js?ver=1.3'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-supersized/js/jquery.easing.compatibility.js?ver=1.0'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-supersized/js/jquery.animate-enhanced.min.js?ver=0.75'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-supersized/js/supersized.3.2.7.min.js?ver=3.2.7'></script>
    <script type='text/javascript' src='http://toivalanurheilijat.fi/uusi/wp-content/plugins/wp-supersized/theme/supersized.shutter.min.js?ver=4.4.2'></script>
    
    Code (markup):
    Should be enough to make you go "ok, screw this", throw the ENTIRE mess in the trash and start over from scratch. Hence the ridiculous 122k of HTML to deliver 1.9k of plaintext and a half dozen images -- basically anywhere from 10 to 12 times as much code as should have been used to build such a simple site.... to go hand in hand with the ape-shit insane 1.2 megabytes of scripttardery spanning 60 files mated to 734k of CSS spanning some 40 or so files doing the job of probably less than 32k COMBINED in two files! (for the ENTIRE site)

    I wouldn't even TRY to fix that laundry list of how NOT to build a website. Pitch it in the bin and start over.
     
    deathshadow, Mar 18, 2016 IP