Is there a way to position this text below in the mobile view on my blogger website?

Hello! I am completely new to the world of web development and coding, and recently ran into an issue while working on my blogger website. I imported a theme template and now I'm trying to figure out how to work with it.

Here's how it appears on desktop (looks good)

And here's how it looks on an iPhoneX (I think I want the text below instead).

I'm not sure which part of the code to include here, so I'll just share the URL:

psycoachalpha.blogspot.com

If anyone can assist me in resolving this issue or if you require more information, please let me know. Thank you!

htmlcsstemplatesbloggerresponsive-images

Answer №1

To achieve this, you can employ a flexbox strategy utilizing flex-wrap: wrap. This will ensure that any overflowing item moves onto a new line.

Answer №2

If you utilize bootstrap, you can employ the Grid system to arrange the blog side by side on desktops and have the text appear beneath the image on mobile devices.

<div className="row">
   <div className="col-sm-4 col-lg-4">
        <div className="skill-item">
            <img className="sticky" src="https://via.placeholder.com/400x790/444444.jpg" title="single-img-five" alt="single-img-five" />
        </div>
   </div>
   <div className="col-sm-8 col-lg-8">
       <div className="skill-item">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
        </div>
   </div>
 </div>

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

Tips for modifying the color scheme of an SVG image with CSS

I am in the process of changing the color of an SVG using CSS. The code I attempted below only alters the background color, but I also need to change the text color. This is my original SVG. https://i.sstatic.net/7lNE0.png The desired output should look ...

htmlcsssvg

Annoying underlines from JavaScript active links - no thanks!

Today I am facing a problem. I want to create a script that will emphasize the active link that I clicked on. I'm not sure how to do this. Can you provide me with some advice? I have an idea, but I'm not certain if it's the best solution. ...

javascriptjqueryhtmlcss

Tips on invoking a factory method from a different service method in AngularJS

I have a factory method that goes like this.. (function (angular) { "use strict"; angular .module('app') .factory('UserService', ['$rootScope', '$q', function ($rootScope, $q) { ...

javascripthtmlangularjsinterceptorfactory-method

The ui.bootstrap.carousel component seems to be missing from the display

My Carousel is not displaying for some unknown reason. I have customized the implementation based on my project requirements which differ slightly from the standard guidelines. Despite this, it should function correctly as detailed below. By clicking on m ...

javascripthtmlangularjsangular-ui-bootstrap

Select a hyperlink within an image on the MVC platform

In my original MVC 2 setup, I had links for different views. <div id="sidebar"> <li> <%=Html.ActionLink("View1", "View1", "Home") %></li> <li> <%=Html.ActionLink("View2", "View2", "Home") ...

asp.netcssasp.net-mvcasp.net-mvc-2

Having issues with the functionality of Bootstrap 4 sticky-top feature

How can I make the sidebar stick to the top across different screen sizes? It works fine for smaller screens up until the 'sm' breakpoint, but beyond that, it doesn't stick. I've tried adjusting the order of class names, but it didn&apo ...

htmlcssbootstrap-4

Steps for positioning a floating button within a textarea

Can anyone help me achieve this design using Vue framework and postcss preprocessor? I attempted a solution involving a contenteditable span as suggested here, but the button isn't floated properly, causing the text to hide underneath it as if it has ...

htmlcssformscss-floattextarea

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

First time poster =) I am currently facing an issue while trying to print a long table and have the table header repeat on each page. The problem arises when the height of the <thead> reaches a certain threshold, specifically 242px in Chrome 87.0.42 ...

htmlcssgoogle-chrome

Having trouble getting CSS styles to work on buttons?

I have implemented the CSS below: /* HEADER STYLES */ .header { top: 0; right: 0; left: 0; bottom: 90%; position: fixed; padding: 20px; background-color: #404040; font-family: 'Lobster', cursive; font-size: 30px; } #fundme { padding-left: 2%; f ...

htmlcss

Retrieve the identifier attribute from a selection element and store it in a php variable

My PHP code generates an HTML dropdown menu. echo '<select id="myselect" name="myselect">'; while($row = mysql_fetch_array($query)) { echo '<option value="'.$row['categories'].'" id="'.$row[&a ...

phphtmlajaxformspost

Is there a way to retrieve the hand-drawn lines at no cost in the form of a list, with each line represented as a collection of coordinates

I am currently contemplating the idea of utilizing fabric.js for an online handwriting recognition system. In order to make this system work, I need to transmit the sketched lines as a collection of lines, where each line consists of several points. If a ...

javascripthtmlcanvasdrawingfabricjs

The Functionality of JQuery Dropdowns

Just dipping my toes into the world of JQuery.. only about 2 hours in. Started working on a drop-down menu for a login box that looks like this: HTML: <button id="loginButton">Login</button> When you hover over the button, this JQuery functio ...

javascriptjqueryhtmlcss

Integrating additional information (HTML) into current content utilizing Vue JS data structures

I am attempting to use Vue JS to load content onto a page. The user interface consists of a select element, a textarea, and a button. I want to display data from a third-party API response on the page. The first item loads successfully, but subsequent item ...

javascripthtmlvue.js

Troubleshooting the issue with dynamically adding form fields in AngularJS

I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. https://i.sstatic ...

javascriptangularjshtmlangularjs-directiveangularjs-scope

Accessing and retrieving data from a designated cell in an HTML Table using Python with Selenium WebDriver

My main question is: How can I extract the Name of the candidate from an HTML Table and write it into a file? (the goal of my program is to enter a registration number on a website, submit it, retrieve the candidate's name, save the registration numb ...

htmlseleniumselenium-webdriver

What is the best way to expand the rows of a textarea after the text exceeds 52 characters?

My preference is to avoid using autoGrow or jQuery elastic for this task. ...

javascriptjqueryhtml

If the ID (i.e. document.getElementById) is not found, then keep JavaScript running

I'm currently working on a JavaScript project where I need the script to gracefully handle missing div-ids and continue executing. I've looked into various solutions, but many involve either replacing the missing ID or placing information into an ...

javascripthtml

What is the best method for organizing data in rows and columns?

I attempted to use my map function to iterate over the data and display it, but I struggled to format it into rows and columns. The requirement is for 5 fixed columns with dynamically changing rows, making array indexing impractical. Here is the code snip ...

javascripthtmlcssreactjstailwind-css

Issue with CSS styling on a content slider causing the last picture to display incorrectly

I recently updated a Content Slider and tweaked the styles to my preference. Check out the changes I made on this link. In addition, I included an extra Thumbnail Picture on the right (7th one) along with the Main Picture. Oddly enough, the Slider seems ...

css

Is there a way to properly size and align an inline image within a dynamically resizing DIV element?

I am working on a fluid layout where I have a div that always matches the height and width of the browser window, regardless of resizing. Essentially, this div is set to be 100% height and width of the browser window. Inside this div, I have an image that ...

jquerycssimage-resizingfluid-layoutfluid