Need help? Check out our Support site, then


Colour change for two column view

  1. maggietaylor1957
    Member

    I am using Reddle which has a liquid format, which is apparently overridden if you have custom header and/or two column layout (I have both) to create fixed column width. However, my site is still resizing up and down if you reduce or expand the browser width, but that's not a problem as it looks OK, but my problem is when you view it at a narrow screen width, e.g. ipad size, at which point the second column moves to flow beneath the first column and converts to a black background - presumably to make the distinction of the second column. I don't like the look of this, as it doesn't match the navy custom colour scheme I've adopted and is in use on the milestone widget. Can someone please tell me if this can be overcome in the css and if so give me a push in the right direction. css is new to me, so very trial and error and I don't really know where to start on this one. All input much appreciated.

    The blog I need help with is x-yachtsowners.co.uk.

  2. However, my site is still resizing up and down if you reduce or expand the browser width, but that's not a problem as it looks OK

    This is expected—it's how the theme was designed to work.

    my problem is when you view it at a narrow screen width, e.g. ipad size, at which point the second column moves to flow beneath the first column and converts to a black background - presumably to make the distinction of the second column

    Take a look at the @media rule for the 900 px max width here:
    https://s1.wp.com/wp-content/themes/pub/reddle/style.css?m=1356723415g&minify=false

    You'll notice there are a few rules that set the background color to black. To override those, copy the @media block, remove everything but the rules for the colors, and replace the color values. Here is an example to get you started:

    @media (max-width: 900px) {
    	#page #main .widget-area {
    		background: #fff;
    		color: #000;
    	}
    	#wp-calendar caption {
    		color: #bbb;
    	}
    	#wp-calendar tbody td {
    		background: #fff;
    		border-color: #fff;
    		color: #bbb;
    	}
    	#colophon,
    	#supplementary {
    		background: #fff;
    		border-color: #fff;
    		color: #000;
    	}
    	#page #supplementary .widget-area {
    		background: #fff;
    		color: #000;
    	}
    }
  3. maggietaylor1957
    Member

    Thank you very much. That has worked perfectly.

Topic Closed

This topic has been closed to new replies.

About this Topic