Column width not responding to screen sizing

  • Unknown's avatar
    amarriedtraveller · Member ·

    Hi, I have been trying to customise the width of two columns in one of my post, a 70% by 30% structure. I have added some CSS commands to achieve that. However, the problem is that the width sticks to the 70/30 structure even when the screen shrinks to a one column layout, which looks quite strange.

    Is there anyway the width of the columns can adjust according to the shrinking of the screen, going to a 100% for both when it becomes one column layout with smaller screen size?

    The CSS and what I typed in post for the HTML as indicated below:
    CSS- 

    /* equal height to column */
	* {
		box-sizing: border-box;
	}
	
	.col-container {
		display: table;
		width: 100%;
	}
	
	.col {
		display: inline-block;
		text-align: left;
		padding: 5px;
		vertical-align: middle;
		margin-top: -20px;
	}
	
	@media only screen and (max-width: 600px) {
	
}

    HTML – 

    <img src="https://amarriedtraveller.files.wordpress.com/2018/05/a-couple-photo.jpg" alt="A married traveller profile picture" />

text

</div>

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, can you give me a link to the page/post where you are trying to do this?

    Generally, you will want to put the 2-column CSS into a Media Query so that it only applies to screens that are perhaps 768px and wider. If you can give me a link, I would be happy to take a look.

  • The topic ‘Column width not responding to screen sizing’ is closed to new replies.