How can I center a button instead of using "margin-left: 0" when its location changes on a smaller screen?

Website:

When viewing the website on my desktop, the text over the top image - "Buckinghamshire Food Partnership believe that everyone is entitled to a Right to Food" and the button - "Get involved" are aligned to the left with a 10% margin. However, on a smaller screen, the text is properly centered, but the button remains aligned to the far left. How can I ensure that the button is centered as well (only when the text above is centered)?

I have tried using this class to align it to the left:

.content-caption {
    max-width: 100%;
    left: 0;
    position: relative;
    text-align: center;

However, adding

position: relative; 
left: 50%;
transform: translateX(-50%);

or

margin: auto;

does not seem to solve the issue. Am I focusing on the wrong solution here?

csswordpressbreakpoints

Answer №1

To achieve the desired result, simply adjust the wp-block-button to have a width:100% setting.

.wp-block-button{
 width:100%;
}

This solution will work effectively for you, considering the inherited styles and how inline-block interacts with text-align:center, ensuring consistent performance across different breakpoints.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for converting text from an HTML input field to a JSON file

After designing a form with four text fields and a submit button, my goal is to save the data into a JSON file upon submission. Additionally, I am looking for a way to display all of the JSON data on my webpage. ...

javascripthtmlcssjsonajax

Rotation using CSS in Internet Explorer 8

Can anyone help me with a CSS solution for rotating elements in IE8? I've tried some solutions that claim to work in IE8, but they're not working for me. What am I doing wrong? Here's what I've attempted: <!DOCTYPE html> <htm ...

htmlcssinternet-explorer-8rotation

Is your animation glitching due to axis restrictions?

I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer ...

jqueryhtmlcssjquery-animate

I hope to retrieve a specific string from an array using PHP

Recently, I installed a WordPress plugin that allows me to rearrange posts easily. This particular plugin showcases the post_name within a drag-and-drop box. Now, what I want to achieve is changing the format of the "post_name" to "post_name - custom f ...

phparraysstringwordpressoutput

How to perfectly center an element with a specified aspect ratio

I am experiencing a strange problem when attempting to center an element with aspect-ratio applied. I thought it would work similar to centering an image, but I keep getting stuck with an element of 0px x 0px. https://codepen.io/richardcool/pen/xxeKOwp I ...

htmlcssaspect-ratio

Animating the process of eliminating a background image

I am working on a project with a div that has a background-image. The goal is to make the image fade away when a button is clicked, and then fade in again when another button is pressed. The focus is on only fading the background image while keeping the co ...

jqueryhtmlcssanimationjquery-animate

When using Firefox to scale down a div with CSS `moz-transform`, the border details are unfortunately not retained

When viewing the following HTML in Firefox, you may notice that the right and bottom border is missing. However, Chrome and Internet Explorer display it correctly. Is this a bug in Firefox, or is there another method I can use to make it look consistent ...

htmlcsstransform

What is a CSS image flush?

Want some help with a website I'm working on? Check it out here: I managed to align the product image with the green section using a negative padding-bottom value like this: img.img-with-animation { opacity: 0; position: relative; padding-bottom: -7 ...

css

Having trouble with Simplemodal showing link content in the modal window

Having trouble getting the modal window to display content from another link? I'm pretty sure I've connected them correctly using the right classes. This is the basic JavaScript provided by . jQuery(function ($) { // Load dialog on page load //$ ...

javascriptjqueryhtmlcsssimplemodal

Expanding borders occur when the element is repositioned using the translate property

I am trying to create a vertical line that remains in the center of a div container regardless of the screen size. I want this line to be 1px thick. However, when I use transform: translate(-50%, -50%);, the border seems to become thicker than expected. Be ...

htmlcss

Right-align each item when selecting none

Is there a way to change the style of just one of the elements select or option, without affecting the style of both? I attempted to align the select element to the right, while leaving the option elements aligned to the left. However, this did not work a ...

javascriptjqueryhtmlcss

Menu design with child element creatively integrated into parent element

For my mobile project, I am working on creating a window blind effect menu. The process is quite simple: Clicking on the menu icon moves the bar to the top while the menu drops down Upon selecting an item, the menu smoothly "rolls" up in a window blind s ...

javascriptjqueryhtmlcss

The reduced motion media query prevented me from using a Bootstrap modal with animations

I'm currently working with Bootstrap 4 modals and I've encountered an issue where the fade animation and slide animation are not being displayed. After doing some research, I discovered that the problem lies within the transitions.scss file which ...

cssbootstrap-4

Troubleshooting: Why is my CSS Div tag failing to

Can someone help me figure out why the CSS isn't working when I try to use a div tag to style a page that I include with include 'login.php'; inside the <div> tag? My main goal is to overlay the form on the page, but for now I just wan ...

phphtmlcssstyles

Resizing webpages for mobile devices results in misaligned rows

I'm currently using Bootstrap on a website and encountering issues with the responsiveness of rows on mobile devices. The desired outcome is for rows to be divided into 4 equal sections per row on larger screens, then scale down to 2 equal sections p ...

htmlcsstwitter-bootstrapmobile

Hide overflow for images with unique shapes

Here are the two image layers: https://i.sstatic.net/lUUQC.jpg One shows a hand holding a phone, and the other is a black hole. This is how you can achieve it using HTML markup: <div class="wrapper"> <img class="wrapper__image" src="path/to/ ...

csscss-animations

How to make an image expand to fit the screen when clicked using HTML and CSS

Is there a way to make the images on this page grow to screen size when clicked, rather than extending past the boundaries of the screen? Currently, the images enlarge to twice their original size on click. How can I ensure that they expand responsively to ...

htmlcss

Using classes to override CSS

I've been going through the Material UI Overrides documentation in an attempt to customize the color of each radio button, but I'm having trouble grasping it conceptually. If I start with Material UI's default setup for radio buttons, how ca ...

cssreactjsmaterial-ui

Animation that slides in from the left using CSS styling

My current project involves creating a slideshow, and while it is mostly working fine, I am facing an issue with the animations. The animation for sliding out works perfectly, but the animation for sliding in from the left doesn't seem to be functioni ...

javascriptcss

Method for eliminating double quotes from a string bound in Angular

https://i.sstatic.net/fWF8M.png https://i.sstatic.net/fWF8M.png Check out this code snippet: var app = angular.module('umovie-app'); app.directive('renamable', function($sce) { return { scope: { model: '=model', ...

htmlcssangularjs