What's the best way to position a lone CTA at the center of the second row on a two-column layout using Elementor?

On my page, I am facing a challenge of adding a second section with a single Call to Action (CTA). The previous section on the same page consists of two CTAs placed side by side with a width set at 50% each. However, now I need to add a third CTA without it spanning across the first two sections. Despite trying various modifications in Elementor controls such as adjusting the widths of the section, column, and CTA itself, I have not been successful. It seems that whatever changes I make are neither effective nor responsive. Is there a way to responsively size the third CTA to match the other two and center it below them?

Answer №1

To maximize the impact of your CTA in the second section, consider organizing it into three columns.

The first and third columns should each be 25% width, while the second column - where the CTA will be placed - should be 50% width. This layout ensures consistency with the previous section, where two CTAs are positioned on 50% width each.

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 integrating SASS from the Bulma package into an Angular application

I'm currently working on implementing Bulma into my project. The documentation suggests using NPM to obtain it. yarn add bulma Further in the documentation, there is an example provided with code snippets like the ones below. <link rel="styles ...

css angular npm sass

What is the best way to customize image transparency using javascript?

Looking to create a webpage that shows an image for a specified duration before smoothly transitioning to another image that includes a clickable link. Wondering how to accomplish this using javascript? I am aware that it can be done with Flash, but it mu ...

javascript iphone html css

Ways to align items in the middle of a list

I'm having trouble figuring this out. How can I properly center list items within the ul? body {margin: 0} ul { width: 1000px; margin: 0 auto; padding: 0; list-style-type: none; margin-top: 30px; overflow: hidden; background-color: # ...

html css html-lists listitem

JavaScript and CSS animations out of sync in terms of timing

I've been encountering some issues. I have an array containing 5 lines of text that change with a timer, but it seems that the css timer animation might not be synced properly or my @keyframes slidesdown setup could be incorrect. The delay between te ...

javascript css

What is the best way to create an animation where every letter in a word transitions to a different

Is there a way to animate a word so that each letter changes color within a range of 7 colors, with all letters displaying different colors simultaneously in an infinite loop? <div class="box"> <h1 class="logo animate__animated an ...

javascript html jquery css

Positioning an image so that it is perfectly aligned on top of another image that is centered

http://jsfiddle.net/Weach/1/ The issue at hand involves a background image created using CSS. This image has been center aligned both horizontally and starting from the top, as visible in the provided JSFiddle link. Specifically, there is another image t ...

html css

Steps for changing an image with another image upon button click in Angular 6

I have a button with an image and text. When the button is clicked, I want to change both the image and content. Here's the code I'm currently using: <div class="btn-default"> <button name="Save" [ngClass]="[bntStyle]" (click)="submit ...

html css angular6

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

html css twitter-bootstrap bootstrap-5

Side-menu elevates slider

Struggling to keep my slider fixed when the side-menu slides in from the left? I've scoured for solutions without luck. Any expert out there willing to lend a hand? Code Snippet: https://jsfiddle.net/nekgunru/2/ ...

javascript css slider position

Scrolling animations do not support the Translate3d feature

I'm struggling to implement a smooth scroll effect on the header of my website. My approach involves using transform:translate3d for animation, with the goal of keeping the header fixed at the top and moving it out of view as the user scrolls down. I ...

jquery css

I am looking to incorporate an image into a particular section of the html code once the screen size is adjusted to mobile view using a media query

How can I use media queries to add an image as a background to the section with the id= "vid" while hiding the background video that is currently playing on it? Here is my current HTML code: <section id="vid" class="vidd"> <video playsinline aut ...

css html media-queries

Is there a way to fix the noticeable difference in how bold text appears between IE11 and Chrome?

When viewing some of the titles on in Google Chrome, they appear like this: https://i.sstatic.net/bKjNE.png However, when viewed in MSIE11, they look like this: https://i.sstatic.net/SJfKk.png The use of strong/bold/font-weight seems to have no effect ...

css windows google-chrome internet-explorer fonts

What is the best method to ensure that an image remains at the bottom of a div even as the div's height adjusts?

In my current project, I am facing a challenge with positioning an image in the bottom-right corner of a dynamically changing div. Initially, this is easily achieved by using CSS selectors: #div1 { position: relative; } #div1 img { position: abso ...

jquery css positioning

Modifying SASS variable values based on the presence of specific text in the page URL

How can I utilize the same SASS file for two different websites with similar functionality but different color schemes? My goal is to dynamically change the color based on the URL of the page. However, I am facing challenges in extracting the page URL from ...

javascript jquery html css sass

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

javascript jquery html css

The Safari 7.1+ browser seems to be having trouble with the spotlight effect

Why is the CodePen not functioning properly in Safari? Despite working well in Chrome and Firefox, it completely fails to work in Safari 7.1+. Can anyone provide some insights? http://codepen.io/cchambers/pen/Dyldj $(document).on("mousemove", function( ...

javascript jquery html css safari

The sequence of loading styles is respected, yet Bootstrap continues to take precedence over the WordPress child

After putting together a WordPress child theme that correctly displays Bootstrap and child-styles.css in the source code, I encountered an issue: View Source Code Stylesheet Order Upon inspecting with Chrome, it's apparent that the color of my link ...

html css wordpress twitter-bootstrap bootstrap-4

Troubleshooting Z-Index problem with Material UI Drawer component on iOS

I'm currently working on a project that involves the use of the Material UI Drawer component. However, I've encountered a specific issue when using an iPad, which presents two main problems: - The overlay does not appear above the navigation bar ...

ios css z-index material-ui drawer

What is the best way to horizontally align a button with CSS?

I need help with positioning a button on my web page. The button looks great, but it's currently off to the left and I want it centered below the main text. Any suggestions on how to achieve this? <!DOCTYPE html> <html lang=""> <head& ...

html css button

Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to. I initially thought of implementing a background color change timeout, but I'm facing some issues with it... Check out this example: I hav ...

javascript jquery css

CSSer Q&A