What could be causing my text to not adapt to a mobile device screen?

Using my MacBook with a display size of 15.4-inch (2880 x 1800), I have captured screenshots of different sections of my homepage to show how they appear.

#app (section1)

https://i.sstatic.net/QjrXe.png

#section2 (section2)

https://i.sstatic.net/5HWp0.png

#section3 (section3)

https://i.sstatic.net/cU5ra.png

----------

CHALLENGE ONE

I am facing an issue with the responsiveness of my h3 text on mobile devices. Despite using <div class="col-lg-12"> for responsiveness, the text does not fit correctly on mobile screens. The code snippet below showcases this problem.

<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
   <span>I'm a</span>
   <span class="cd-words-wrapper">
   <b class="is-visible">Front-End Web Developer</b>
   <b>Graphic Designer</b>
   </span>
</h3>

Attached is a screenshot displaying the issue on a mobile device view of my website.

https://i.sstatic.net/rV5c4.png

Link to JSFIDDLE

javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer №1

By removing <code>white-space: nowrap
from the .cd-words-wrapper b section, you can allow text to wrap on small screens:

 .cd-words-wrapper b {
      display: inline-block;
      position: absolute;
      width: 100%;
      text-align: center;
      left: 0;
      top: 0;
  }

Check out this link for an example.

If needed, consider using vw and vmin units to ensure content stays within the screen boundaries.

Answer №2

The CSS rule for <class=".cd-words-wrapper b">
is currently set to white-space:nowrap, causing all text within it to remain on a single line. To resolve the responsiveness problem, simply remove this property.

Answer №3

Implement a media query in your CSS;

@media screen and (max-width: 480px) {
    /*your div class name --> h3 { font-size: new size; }

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

Textbox value disappears after being updated

When I click on the edit link (name), the value from the database is displayed as a textbox. However, when I update another normal textbox (age), the value in the edit link textbox disappears. Strangely, if I input a new value into the edit link textbox, i ...

javascriptphphtmljquerymysql

Instructions on establishing a connection with a MongoDB server using JavaScript

Hello all, I am a complete beginner when it comes to working with mongodb and java script. I am currently trying to figure out how to establish a connection to my local mongodb instance using java script so I can retrieve a list of documents. Does anyone ...

javascriptmongodb

Setting the variable to global does not apply styling to the element

Looking for help with styling an element created using document.createElement("img")? let fireball; //global variable fireball = document.createElement("img") //variable on local fireballArray.push(someFunction(fireball, { src: "img.png&qu ...

javascripthtmlcssdomstyles

Can I initiate an AJAX call from a different JSP page?

My scenario involves a JSP page that opens another JSP in a new tab. In the second JSP, I upload a file to the server, as I have certain important operations to perform there. However, I also need to include a link to this uploaded file in the first JSP ...

javascriptjavajqueryajaxjsp

Adjust the quantity of images shown in the Flex Slider carousel

My website includes a flex slider with a carousel, but it seems that I did not configure the properties of the slider correctly (or it could be a CSS issue) as shown here: . The last image in the carousel is only partially visible. While I am able to clic ...

jquerycssflexslider

The Jsonp request is receiving a null parameter

I'm encountering an issue where passing a request results in null being passed to the request parameter on the server side. Could this be related to the data attribute? $.getJSON('http://127.0.0.1:81/api/sites/GetDomainAvailability?apikey=asfasf ...

c#jqueryjson

Using the map function to iterate over an array of objects retrieved from GetStaticProps in NextJS

Currently, I am working on a mdx blog within the NextJS framework. To achieve this, I have implemented a function called getPostDataByCategory(category) in posts.js located under lib. This function is responsible for filtering posts based on categories. ge ...

javascriptnext.jsjavascript-objectsnextjs-dynamic-routinggetstaticprops

Is there a way to relocate the play again button below the box?

How can I ensure that my "Play Again" button moves up to align perfectly under the black border box? The black border box is styled with a class named .foot .button { background: rgb(247, 150, 192); background: radial-gradient(circle, rgba(247, 1 ...

htmlcss

Getting undefined while trying to iterate through data on a next js page using getStaticProps. What could be causing this issue?

Encountering difficulties while trying to output the page meta data in next.js when I execute: npm run build An error is thrown with the following message: Error occurred prerendering page "/blog/[...slug]". Read more: https://err.sh/next.js/pre ...

javascriptreactjsaxiosnext.js

The issue with anchor links not functioning correctly in Chrome's desktop browser has been identified

I am interested in utilizing the greenfair CSS template available at this link. However, I have encountered an issue where the anchor links in the navbar do not work properly in Chrome (they function correctly in Firefox and IE). How can I resolve this pro ...

javascriptjqueryhtmlcssgoogle-chrome

Prevent those pesky popups with this handy script

Even though AdBlock sometimes doesn't block popups, I have a solution in mind. I plan to use Greasemonkey and jQuery to create my own popup blocker. Is it possible to intercept the clicks and determine if a popup is about to open? $('.popupLaun ...

javascriptjquerygreasemonkeyadblock

What's preventing canvas from working offline but functioning properly on the TRYIT platform?

I have created some canvas-related code that works perfectly on TRYIT editor, but it fails to work locally when I copied the code into a file and tried to run it. This code is designed to take an image, set the width and height of a canvas based on that i ...

javascripthtmlcanvas

Updating a single document in Node JS using Express is a simple and straightforward process

I'm having trouble understanding why my documents aren't updating. When I retrieve any record and load it into the form using http://localhost:3000/update2?buyerID=2299, the field doesn't update when I make changes and click submit. It rema ...

javascriptnode.jsexpressejs

What is the significance of declaring a constant array in JavaScript?

Does declaring an array as a constant in JavaScript prevent it from changing size, or does it mean that the values inside the array cannot be modified? handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState( ...

javascriptarraysreactjs

Despite correctly declaring jquery-ui.js and numeric.js, the jQuery datepicker and numeric plugins are not working as expected

element, it's strange that I am not receiving any error messages. However, despite this, the jquery datepicker function and numeric plugin are not working on the intended input fields they are supposed to be linked to. This particular page is a simpl ...

javascriptjqueryasp.net-mvcasp.net-mvc-3jquery-ui

Encountering both a CORS error and data in Angular 7

My application is using Angular 7 for the front end and Node.js (express) for the backend. The cors module in the Node.js server.js file is implemented like this: var cors = require('cors') app.use(cors()); When making an API call from the fro ...

javascriptnode.jsangularexpresscors

Understanding the reference and scope of an object generated within an Ajax response

After spending hours fruitlessly trying to figure it out on my own (and searching stackoverflow :S), I've come to seek your help. My question is regarding accessing an object that was created in an ajax response: $.ajax({ type: "GET", u ...

jqueryajaxscoperesponse

What causes the circular progress bar to disappear when hovering over the MUI React table?

My goal was to create a table with a CircularProgressBar that changes its background color from orange to dark blue when hovering over the row. However, despite my efforts, I couldn't get it to work as intended. Additionally, I wanted the progressBar ...

javascripthtmlcssreactjsmaterial-ui

Include a link to a JavaScript file within a dynamically created HTML page in a Delphi VCL application

I am currently developing a Delphi XE5 VCL Forms Application which includes a TIdHTTPServer on the main form. Within this server, there is a CommandGet procedure called IdHTTPServer: procedure TForm1.IdHTTPServerCommandGet(AContext: TIdContext; ARequest ...

javascriptdelphi

Styling list items (li) on hover without using the li:

I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element. HTML: <ul class="main-menu"> <li class="active"><a href="">Menu</a></li> <l ...

htmlcsshoverhtml-lists