Why does my paragraph consistently fall behind my button no matter what?

Whenever I resize the window, the text in my footer overlaps with my button:

Any suggestions on how to resolve this issue?

Here is the HTML code snippet:

<div data-role="footer" class="footer2">
    <a href="#seiteHome" class="ui-btn-left ui-btn-back ui-btn ui-btn-corner-all ui-shadow ui-btn-hover-a ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-back">Home</a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

And here is the corresponding CSS code:

.footer2 {
    text-align: center;
    padding: 7px;
    border-radius: 10px;
    clear: both;
}

Thank you for your help in advance.

jqueryhtmlcssjquery-mobile

Answer №1

To ensure the text doesn't overlap with the button and appears to the right of it, simply add some padding on the left side of the <p> element:

.footer2 p {
    padding-left: 84px;
}

Check out the DEMO here!

Answer №2

CSS

.footer2 {
   text-align: center;
   padding: 7px;
   border-radius: 10px;
   clear: both;
   margin-top: 30px;
}

Another option:

.footer2 {
  text-align: center;
  padding: 15px 7px 7px;
  border-radius: 10px;
  clear: both;
}

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

Minimizing the gap between icon and label text

I have a React form that I need help with. The issue is that I want to reduce the space between the list icon and the label. Here is the CSS I am using: .form__container { display: flex; flex-wrap: wrap; } .form__container input { color: rgb(115, 0, ...

javascripthtmlcssreactjstwitter-bootstrap

Embed a photo into a pop-up window

Is there a way to dynamically insert an image into a Modal by utilizing the value of the variable data-image? This variable will change based on the selected image. <script type="text/javascript"> $('#myModal').on('show.bs.m ...

javascripthtmlbootstrap-4

Incorporate an MP3 audio track into an image

Greetings, I have an image and I am interested in embedding the associated MP3 file directly onto the image instead of having it displayed separately below. Is this achievable? Thank you Best regards, Gary <!doctype html> <html> <head&g ...

htmlmp3embedaudio

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...

ioscssgoogle-chromecss-position

Encountering a 500 (Internal Server Error) while trying to insert data into the database through ajax

In the HTML code, I have a basic AJAX function that is triggered by a button press. The goal is to have the PHP script being called insert the JavaScript variable sent into a database. var myval = 'testuser'; // generated by PHP $.a ...

javascriptphpjquerymysqlajax

Learn the best practices for incorporating jQuery and other JavaScript libraries in your Angular2 projects

Is it possible to integrate a demo showcasing Bootstrap carousel with CSS3 animations in Angular2 using HTML, CSS, and JS? I have created my own implementation in Plunker with Angular2, but I am facing issues with the animated inner content of the carousel ...

javascripthtmlcssanimationangular

Binding multiple forms in backend ASP.NET MVC using Managed Extensibility Framework (MEF)

We are facing a challenge where we need to send multiple forms in one Ajax (jQuery) Call to an ASP application. The jQuery code we are using is as follows: var formContainer = { Form1 : form1.serialize(), Form2 : form2.serialize() } ...

javascriptjqueryajaxasp.net-mvcmodel-binding

``There seems to be an issue with the jquery Waterfall plugin where it is not properly waiting for

Utilizing the waterfall plugin with jQuery on my website has been a smooth experience. My current setup involves jQuery 1.9.1 along with Knockout.js for my JavaScript view model. The data is fetched through an ajax call to a web API service, delivering JSO ...

javascriptjqueryajaxknockout.jswaterfall

Input field in a tableview

I have a ListView that features a dropdown, 4 textboxes and buttons. My goal is to only show the fourth textbox (enclosed in a span) when the dropdown value in each row of the ListView is set to 2. For instance, if there are 5 records being displayed in t ...

javascriptasp.nethtmllistviewtextbox

Tips for concealing a submit button in CodeIgniter

Is it possible to hide the submit button if the completion status is 'completed'? Here is a snippet of my code: <input type="submit" <?=($row[ 'checklist_id']=="Denied" ||$row[ 'checklist_id']=="Approved" ||$row[ &apos ...

phpcsscodeignitercodeigniter-2

Storing user browsing history and showcasing a randomly chosen page

Currently in the process of creating a website where various pages will be dedicated to showcasing videos. I envision an innovative feature where the site will continue to play random videos successively without repetition, ensuring that users have a uniq ...

phpjqueryajaxweb

Should I publish on a model that can be accessed as a list?

Hey there, everyone. I'm new to .net mvc and I have a listing page for students. The challenge I am facing is that I need to enter grades for all the students on the page at once, but the model is structured as a list which makes it difficult to save ...

html.netformspostmodel-view-controller

MacOS web browsers adjust content to fit the screen size

As I delve into React development, one thing that has caught my attention is how MacOS browsers try to fit all the page content in view rather than allowing users to scroll. Let me illustrate this with an example: function Example() { const Elements = ...

cssreactjsmacosmaterial-uioverflow

Bing Map problem: p_elSource.attachEvent is throwing an error

I am encountering a significant issue with Bing Maps. The API link I am using is: Initially, I am seeing an error in firebug that looks like this: this.CreditsFor=function(a,i,j,h) { var e=[]; if(a!="undefined"&&a!=null&&typeof m_ta ...

javascriptjqueryfirebugbing-mapsvirtual-earth

When the button is clicked, initiate the download of a file and include a parameter containing the desired value to be

If there is a change in the table on the index page triggered by a specific event, another file called excel.php can be used to generate an Excel sheet. To run the excel.php file and download the excel file while staying on the index page, a jQuery script ...

phpjqueryajax

Trigger page load upon closing a popup window by utilizing the "beforeunload" event

I'm attempting to assign an event handler to beforeunload using JavaScript. This is the code I am currently using: $(window).on("beforeunload", function() { $("#popupin1").load("new.html"); }) I receive the alert, but the loading div does not a ...

javascriptjquery

Identifying the loaded CSS with jQuery

My HTML page dynamically loads specific CSS files based on screen width (for PC, tablets, and phones): <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="all" href="css/style.css" &g ...

javascriptjqueryhtmlcss

When Google Chrome encounters two variables or functions with the same name, how does it respond?

I am curious what happens when Google Chrome encounters two variables with the same name. In my particular case, this issue arises in the code snippet available at this link, which is a small portion of the entire code. I am facing an issue where placing C ...

javascriptcsshtmlgoogle-chrome

Missing or Lost Values in Object-Oriented PHP Arrays

I am fairly new to object-oriented PHP and PHP in general. I have a class where I assign array values in the constructor, but later when I try to access the array, it shows as null. Any ideas why this might be happening? Could it be an issue with scope? c ...

phphtmlarraysscope

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

javascripthtmlcssresponsive-designcross-browser