I aim to place my :after content in mobile view or lower resolutions

I have a testimonial section built with HTML and CSS. You can view the demo on JSFIDDLE HERE. In the mobile view, I am facing an issue where the ":after" content is not aligning properly or appears misplaced. I'm looking for ideas to ensure that it remains in a constant position in both mobile and normal views. Any suggestions?

 <div>
 <div class="testi-inno" id="testi-one">

<p>“Lorem ipsum dolor sit amet”</p>
</div>
</div>

<div class="testi-img" style="clear:both;">
<img src="" alt=" " width="70" height="70"/>
 </div>
<p class="testi-par">Client Name</p>
<p class="testi-paras">Designation</p>
  </div>

CSS:

.testi-inno p:after {
   content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-top: 20px solid #fff;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  top: 19%;
  left: 42%;

}
.testi-inno{
background:#fff;
margin:10px;
box-shadow: 10px 10px 5px #888888;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
border-radius: 10px; 
}
.testi-inno p{
margin:15px;
margin-bottom:15px !important;
  padding-top: 10%;
  padding-bottom: 10%;

}
.testi-img img{
 background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-top: 7%;
    margin-left: 34%;
}

VIEW DEMO ON JSFIDDLE

Answer №1

If you're looking for a quick solution, try using position:relative in the ".testi-inno" class. Position:relative controls the position:absolute.

 .testi-inno{
    background:#fff;
    margin:10px;
    box-shadow: 10px 10px 5px #888888;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
  }

In your situation, when setting values like top: 19% or left: 42%, they should work based on window walls. However, after applying Position:relative to the parent div (.testi-inno), these values will be relative to .testi-inno itself. It ensures proper functioning on mobile devices. Another tip is to use left: 50% instead of 42% to center the arrow.

 .testi-inno p:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-top: 20px solid #fff;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    bottom: 0%;
    left: 50%;
    margin:0 0 0 -20px;
 }

You can view the demonstration on JSFIDDLE DEMO.

Answer №2

Simply update the .testi-inno p:after to .testi-inno:after and change top: 19% to margin-top: -15px.

Check out the JsFiddle Link for more details.

For example,

From

.testi-inno p:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-top: 20px solid #fff;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  top: 19%;
  left: 42%;
}

To

.testi-inno:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-top: 20px solid #fff;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  margin-top: -15px;
  left: 48%;
}

I hope this explanation is helpful.

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 is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

Is there a way to count the number of elements with the class '.child' in each container and then add a sentence containing that count inside each container? <div class='container'> <div class='child'></di ...

Finding the image source of a clicked image

Is it possible to retrieve the image src after clicking on another image? $(document).ready(function() { $('img.getimage').click(function() { alert($(this).attr('src')); }); }); .sinistra { width: 150px; } .getimage { wi ...

What could be causing the submission failure of the form post validation?

My Code: <form method="post" name="contact" id="frmContact" action="smail.php"> ... <label for="security" class="smallPercPadTop">Please enter the result:</label> <br /><h3 id="fNum" class="spnSecurity"></h3>& ...

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

How can I insert an HTML/PHP code snippet into a <ul> list using JavaScript?

My upload.php file saves images into an uploads/ folder within my main directory. I am looking to dynamically add a new li tag to my index file each time an image successfully uploads. Here is a snippet from index.php: <ul> <li><im ...

Printing the HTML Template of a widget with multiple loops results in a blank first page being displayed

I have encountered an issue while working with a table and ng-repeat loops in my report widget. The table displays fine on the screen, but when I try to print it, there is always a blank page at the beginning. Interestingly, if I remove the second and thir ...

"Interactive elements like dropdown menus and clickable buttons that transform the content of an HTML

My webpage includes three buttons that, when clicked, reveal hidden div elements containing forms. Here is the HTML code for the buttons: <button id="edituser" type="submit" onclick="toggle_visibility('c');" style="border:0;width:100px;margin ...

Standard tag for all JSP pages including doctype declaration and styles

I have multiple .jsp files and a page.tag that contains information about all the .jsp files. I don't want to include doctype, styles, and scripts in every single .jsp file, as it would require changing them individually if any updates are needed. Ins ...

Issue with Hover Effect for Input Type in Submit Form in HTML and CSS

In the following HTML code, a form is displayed inside a card HTML. The form appears after an onlick function which functions correctly. However, the submit button in the form below does not display a hover effect. <!-- Update details form here --> ...

numerous requirements for formatting utilizing Css modules

Can someone help me figure out how to set multiple conditions using a ternary operator to style an element with Css modules? I'm struggling to find the right syntax. Is it even possible? import style from './styles.module.sass' const Slider ...

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

You cannot use a colon ( : ) in HTML input text fields

How can I prevent a colon from being inserted into an input text field? In my code snippet, I have <input type="text"/> and I want to ensure that if the user types " : ", nothing appears in the input text field. Is there a way to achieve this using ...

What is the best way to make a bootstrap component (container) stretch to the full width and height of the window when it first loads, and which

I am looking to achieve something similar to the design on a certain website: The goal is to have a container with a background and a form inside that resizes proportionally based on the size of the window it is opened in. The resizing should be smooth an ...

Hover over images for cool effects

Check out the code snippet I created on this link The current functionality enlarges images by 20 percent and overlaps into the table on hover. How can I enlarge both the image and table dimensions simultaneously? Below is the HTML code: <table borde ...

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

issues with functionality in purecss drop down menu

I have been struggling to create a vertical drop-down menu using the purecss library without success. purecss.io/menus/ This is what my CSS code looks like: <div class="pure-menu custom-restricted-width"> <ul class="pure-menu-list"> ...

How can the presence of a CSS rule prevent another from being applied?

My attempt to create this HTML file in Chrome posed some challenges: <style> br { }​ [required] { border-width: 3px; border-color: red; } </style> <input required /> The entire content of the file is shown above. However, I noti ...

Moving pictures using css3 transitions

Trying to create a straightforward image slider. Below is the provided JavaScript code: $(document).ready(function() { $('#slide1_images').on('click', 'img', function(){ $("#slide1_images").css("transform","translateX ...

Customize chrome's default shortcuts with JavaScript

I'm working on an application that requires me to override some shortcut keys in the Chrome browser. While I'm able to create custom shortcuts to trigger alerts like in this Stackblitz example, I'm having trouble overriding a few default sho ...

Splitting columns evenly in a table with a width of 100%

Welcome to my first query on this platform. Despite my efforts to search for a solution, I couldn't find an explanation as to why my code isn't functioning correctly in Internet Explorer (10+). I have created three divs displayed as cells, each ...