Discrepancy in outcomes between desktop computers and iPhones

Upon comparing these two images: (desktop) and (iPhone 5), I am unsure how to achieve the same layout for both. The paragraph "En ovra afrontamos ..." seems to be misaligned.

You can view the website here:

Here is the CSS code for the paragraph:

p {
  line-height: 21px;
  font-size: 15px;
  font-style: normal;
  padding-right: 45px;
}

Answer №1

There are numerous solutions to your inquiry. Here's one suggestion:

To style the .der element, include the following CSS:

body main section.razones .der {
    float: right;
    width: 50%;
}

Next, remove the margin-left property from the .izq and apply it to both the .bocadillo and the ul:

body main section.razones .izq {
    float: left;
    width: 50%;
}
body main section.razones .izq .bocadillo, body main section.razones .izq ul {
    margin-right: 40px;
}

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

What are the common reasons for ajax requests to fail?

Every time I try to run the code with the provided URL, the alert() function in the error: function is triggered. Can someone please assist me with this issue? $("#button").click(function(){ $("#form1").validationEngine(); if($('div input[typ ...

Detecting Collisions in a Canvas-Based Game

As part of my educational project, I am developing a basic shooter game using HTML5 canvas. The objective of the game is to move left and right while shooting with the spacebar key. When the bullets are fired, they travel upwards, and the enemy moves downw ...

Grid system that adapts without distortion

My goal is to create a grid that maximizes the number of elements in its width without stretching them to fit the entire window. That's why I'm utilizing CSS grid with the auto-fill property, which is almost achieving the desired outcome. I want ...

"Looking to add some flair to your website with a

I am trying to figure out how to place a 30x30px no-repeat background image in the top left corner of a 200px by 200px div, positioned 120px from the left and 50px from the top. However, I also want to ensure that the text inside the div is displayed on to ...

Keeping DIV in place as page scrolls

My webpage has 2 columns, with the left column longer than the right one. As I scroll down the page, I want the right column to stay fixed in place while only the left column moves. This will ensure that the right column remains visible at all times rega ...

"Selecting options from a range - Bootstrap multiple

Currently, I am in the process of implementing a multiple-choice tick box for PHP. The code I have so far is as follows: <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="inp ...

Burger on a website designed for desktop users

In my project, I am looking to only display a hamburger icon with a list of items on mobile view. I do not want any menu items in the navbar on desktop and tablet views. Is there a way to achieve this using Bootstrap or another method? Any suggestions for ...

The navbar slide toggle is supposed to slide behind the navbar, but instead it slides in front of

Recently, I created an animated navbar that works perfectly fine. However, there is one issue that bothers me - when the list of menu items slides open, it appears in front of the navbar instead of behind it. If you'd like to see the problem in actio ...

I'm curious as to why styled components weren't working before

I'm attempting to utilize the before on styled components in React, but it doesn't seem to be functioning correctly. Prior to adding before, the background image was displayed, but after its inclusion, the image is no longer showing up; import st ...

Display each div one at a time

I am working on a script that should reveal my divs step by step. However, the current code only shows all the divs at once when clicked. How can I modify it to detect each individual div and unveil them one by one? For example, on the 1st click => expa ...

Unveil the stunning left-to-right SVG animation

I have two SVG images and I want to create an animation with them. The animation consists of revealing the text "Full Screen" from left to right using the first SVG, and then covering the word "Screen" with the second SVG to reveal the entire second image. ...

Exploring the art of JSON interpretation within Highcharts

Below is an example snippet that utilizes static data: Highcharts.chart("container", { title: { text: "Highcharts pie chart" }, xAxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Ju ...

Automatically updating the JavaScript content on a webpage without having to refresh the entire HTML page, based on the changing

Is there a way to adjust the opacity change rate of my nav bar automatically without the need to refresh the page? The current opacity change rate is based on the width of the window, but once the page is loaded, adjusting the width does not affect the rat ...

Ensure that scripts with the type of "module" are completed before proceeding to execute the following script

In my HTML document, I have two script tags with type="module" at the bottom of the body tag. Following those, there is another script tag with embedded code that relies on the results of the first two scripts. Is there a method to ensure that this code ...

"Enhance your UI design with Bootstrap 3.0 by adjusting the datepicker's position from right to left

I'm having trouble adjusting the position of a datepicker from bootstrap, specifically changing it from right to left. Here is the HTML code I am using: <div class="col-sm-8 input-group date " id="dpYears" data-date="12-02-2012" data-date-format= ...

Position the div in the center with overflow properties

After returning to web design as a hobby, I've encountered some difficulties. I'm currently trying to center a div that contains other centered divs. However, when resizing the page, I want to ensure that the divs remain centered and their overfl ...

Displaying an email exist error message is important when updating an email address, and it is necessary to validate both the

      My code is triggering an email exists error when I remove NOT EXISTS from the SELECT query. However, it also incorrectly claims that my current email already exists when I try to update it. How can I modify the select query to handle the email e ...

The dimensions of the image change before and after it finishes loading

My webpage is filled with numerous fairly large images, each about 100Kb in size and measuring around 600 x 400 pixels. I am attempting to adjust the photos based on whether they are in portrait or landscape orientation. The issue I'm facing lies in ...

Assistance required in adjusting the clickable area of the link

While casually exploring a random website, I decided to experiment with some design elements. However, I encountered an issue where the link was only clickable on the left side and not the right. This is how it appears: There is a div containing a heading ...

exploring the network of connections

This is what the HTML structure of the webpage looks like: <body> <form> <input type='file'/> </form> <div id='list'> <div>value here<input id='delete' type='button'/>< ...