Layout not responding well to smaller screen sizes and picture alignment

Hi Anne,

I apologize for the delay, we are on vacation for the holiday but will investigate and provide a solution at the start of next week.

Thanks,
Nick

Hi Nick,

No problem, appreciate your help! Thanks, Anne

Good morning Anne,

You need to add some mobile specific CSS to accomplish this. The below code should get you started. It needs to be added to the end of your theme’s style.css file. Let me know if you have any questions.

@media only screen and (max-width: 960px) {
	
	.featuredpage a.alignleft,
	.featuredpage a.alignright {
		float: none;
		text-align: center;
		width: 100%;
		margin: 0;
		display: inline-block;
	}
	.featuredpage a.alignleft img,
	.featuredpage a.alignright img {
		width: 100% /* Optional if you want full width images on mobile */
	}
}

Thank you very much for your help Nick, everything looks good now! Really appreciate the support! Anne

Nick, I do have one more question: As I’m adding custom content to the box with the picture on the right I realize that the text is cramped all the way to the left of the box without any space. The titles are fine it’s just the custom content. I tried adding padding to the code but for some reason it applies only to the picture not the text. Same in the media screens when the text moves underneath the picture it is cramped to the sides of the box without any space. What would be the code to add some padding between the text and the box? Thanks again! Anne

Hi Anne,

The code that I provided is just for the linked image (a img). You need to add the CSS to the text directly. You can do this by targeting the .entry-content div. See the code below:

.featuredpage .entry-content {
	/* Add styled here */
}

Your browser’s inspector tool is a great way to find the specific classes to target for various components of your site. Let me know if I can help further.

Best,
Nick

Hi Nick,

Ok I got it! Thank you so much for your help!!! ?? Anne