center Call To Action text on responsive resize?

Hi there,

If you want your code to work at a particular screen size you’ll have to use media queries to tell the browser when you want the code to be activated.

For example, something like this:

@media (min-width: 768px) and (max-width: 979px) { 

.call-to-action-content {
 float: none;
 width: 100%;
 margin-bottom: 10px;
 text-align: center;
}

}

You can adjust the min-width and max-width sizes to focus on the screen size you are targeting or create multiple media queries for different screens – say smartphone, tablet, laptop, desktop for example.

The best way to save these changes is in a child theme, so your customizations stay safe when your theme updates.

Perhaps you could post a link to your site so what can see exactly what is going on?

I hope that helps.

– Luke

https://loveblossomsweddingflowers.com

Yes, that is the code that is present, and it is in a child theme, it’s the exact code from the original css:

@media screen and (max-width: 1078px) {

	.call-to-action-content {
		float: none;
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}
)

But making changes does nothing – many thanks for you response and help!

Are you trying to achieve this?

Screenshot

If so you could try and use fluid margins instead:

.call-to-action-button {
  margin: 22px 28% 0 0;
}

.call-to-action-content {
  margin: 0 0 0 10%;
}

I hope that helps.

– Luke