What might be causing my website to appear differently on mobile devices?

I am currently using a MacBook with a display size of 15.4 inches (2880 x 1800). Below is a screenshot showing how each section of my homepage appears on my website.

QUERY 1

How can I make my h3 text responsive on mobile devices? As shown in the screenshot, it does not adjust properly to fit the screen. Despite using <div class="col-lg-12"> for responsiveness, the issue persists on mobile devices. The JSFIDDLE link below showcases this problem on my site.

<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>

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

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

JSFIDDLE

jqueryhtmlcsstwitter-bootstrap-3

Answer №1

To implement responsive design, you should utilize Bootstrap's media queries.

@media (min-width: 375px) and (max-width: 414px) {
 .cssClass1{
    margin-left:5px !important;
   }
 }

This will apply specific CSS classes to devices with a width between 375 and 414px. The dimensions of various devices can be found in the Responsive Design section on Safari - for example, iPhone 5 is 320px wide and iPhone 6 is 375px wide.

Take a look at this JSFiddle where I adjusted the font size to 0.5em for devices under 375px. Remember to use the !important keyword if needed to ensure the styles are applied properly. Give it a try and let me know if you have any questions!

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

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

I am facing an issue with a dropdown inside a Bootstrap grid. When I click on the dropdown, the height of the row is not increasing as expected. Can anyone guide me on how to achieve this? HTML: <div class="container"> <div class=& ...

htmlcsstwitter-bootstrapbootstrap-4dropdown

Using jQuery to retrieve the domain extension from a URL

Seeking assistance with extracting domain extensions from various URLs using jQuery. Uncertain how to account for all possible scenarios. Here are the parts of the URL that need to be extracted: https://www.amazon.**com**/dp/067144901X https://www.amazon. ...

javascriptjqueryhtmlurl

My goal is to retrieve specific text from an HTML page that contains two distinct classes

I am trying to pull shipping fees from different types of html pages. Each page requires a unique Xpath for extracting the shipping fees. For one type of page, the Xpath is //*[@class="flex flex-row justify-between f6 mid-gray pt2"]//div[2]/text ...

pythonhtmlxpathextract

What is the best way to invoke a PHP function using a jQuery AJAX request?

Similar Question: How can I use jQuery $.ajax to trigger a specific PHP function? I am trying to execute a particular PHP function from within my PHP file. Is there a way to reference that function using a jQuery AJAX call instead of invoking the enti ...

phpjqueryajaxfunction

The Ajax autocomplete feature was unable to find a matching HTTP resource for the requested URI

Seeking assistance with implementing autocomplete functionality on a textbox using data from a web method. The webmethod's browser operation is as follows: http://localhost/psa/DesktopModules/PsaMain/API/ModuleTask/GetIssuers?SearchString=e The resu ...

c#jqueryajax

What methods are available for implementing hover effects within attributes using a JavaScript object?

const customPanelStyle = { 'background-color': 'red', 'border': '1px solid green', ':hover'{ 'background': 'blue' } } class some extends React.Component{ rende ...

javascriptcssreactjs

Conflict between jQuery calendar and mootool image slider detected

<script src='<?php echo $fullpath; ?>lib/jquery.min.js'></script> <script src='<?php echo $fullpath; ?>lib/jquery-ui.custom.min.js'></script> <script src='<?php echo $fullpath; ?>fullcal ...

javascriptphpjquerymysqljquery-plugins

Ways to extract information from a URL when utilizing JQuery code

Code snippet: $(document).ready(function(){ $(".uni_type").click(function(){ uni_type = this.id; location.href = "filter-colleges.php?uni_type="+uni_type; }); }); HTML code: <ul> <li class="uni_type" id="central univ ...

javascriptphpjqueryhtmlcss

Achieving a hover effect following the execution of a jQuery animate() function

I'm working on a code snippet to increase the size of an image when hovered over: $(".myImage").hover(function () { $(this).find('img').stop() /* Add class of "hover", then stop animation queue buildup*/ . ...

jquerycssjquery-animatez-index

`.svg file appearing slightly fuzzy when magnified in Chrome``

After careful consideration, I've chosen to use an SVG for my website logo. However, I am facing an issue with it rendering properly in Google Chrome. When the zoom level is set at 100%, the image appears blurry, but if I zoom out a couple of times, i ...

htmlcssxmlgoogle-chromesvg

Utilizing the CSS Flex property to position one element in the center and align the other element to either the left or right side

What is the best approach to center one element inside a container with CSS flex properties and align another element to the left or right? Even when I set ChatGPT's recommendations of margin-left and margin-right properties to auto for the right-ali ...

htmlcss

Tips for automatically inserting a "read more" link once text exceeds a certain character count

Currently utilizing an open-source code to fetch Google reviews, but facing an issue with long reviews. They are messing up the layout of my site. I need to limit the characters displayed for each review and provide an option for users to read the full rev ...

javascriptjqueryhtmlcss

Tips for resizing a tooltip using CSS

I am currently working on customizing tooltips and would like them to display right below the hover text in a responsive manner, with the ability to have multiline text. Instead of spreading horizontally, I want the tooltip to expand vertically based on th ...

javascripthtmlcss

Django/Bootstrap: experiencing issues with certain default styles not functioning correctly like nav-tabs and buttons

When using Django in combination with Bootstrap v5, I am encountering an issue where the "nav-tabs" class is not being styled as tabs and gray buttons are not taking on the pill style. It appears that only a portion of Bootstrap is functioning correctly. W ...

htmlcssdjangobootstrap-5

The combination of using p:inputText within p:layoutUnit does not function properly when placed inside p

Recently, I encountered a problem with a modal dialog that contains some input components. The issue arose when I implemented a p:layout within the dialog. Initially, the p:inputText component within a p:layoutUnit functioned properly and gained focus. Ho ...

cssprimefaces

Dynamically insert letters into each row as the HTML table increases

How can I display dynamically increasing alphabets in a newly generated cell on the left side of each row, based on the option selected in a dropdown list? These alphabets will serve as bullet points or serial numbers for the text boxes in each row. View ...

javascriptjquery

What is the best way to extract HTML using selenium.webdriver in Python?

Appreciate your attention, and please excuse any errors in my English. I am currently attempting to retrieve HTML from . The process involves entering some text into an input box and clicking a button, which triggers the following actions: Load the Yaho ...

javascriptpythonhtmlselenium

Showing an image in Django HTML: a beginner's guide

I have successfully created a functioning web page, but I am facing an issue with displaying images. Here is the structure of my directory: polls/ mountain.jpg templates/ polls/ index.html .everything else I am using this code in ...

htmldjango

Steps for inserting new text in front of an element's existing text

Is there a way to insert text before the original content of an element? I know how to add text after using createTextNode, as shown in this example: $("#button").click(function() { $( ".text" ).append( document.createTextNode( " Hello" ) ); }); < ...

javascriptjqueryhtml

Changing the color of text in one div by hovering over a child div will not affect the

When hovering over the child div with class .box-container, the color of another child div with class .carousel-buttons does not change. .carousel-slide { position: relative; width: inherit; .carousel-buttons { position: absolute; z-index: ...

htmlcsssass