Shifting an icon to the left with CSS

.panel {
    margin-bottom: 20px;
    background-color: #F7FAFE;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
}
.panel-default {
    padding: 10px;
    border-color: #ddd
}

.panel-default>.panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.mostPopular {
    margin-bottom: 20px;
}
.mostPopular .headText h3 {
    font-weight: 700;
    margin: 0;
    padding-bottom: 17px;
    font-size: 17px;
    width: auto;
    float: left;
    margin-right: 10px;
    max-width: 275px;
    color: #27ae60;
}
.headText {
        text-align: center;
    width: 100%;
    display: inline-block;
}
.headText h2 {
    color: #27ae60;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.mostPopular #pop {
    font-size: 100%;
    position: relative;
    top: -15px;
}
.mostPopular p {
    font-family: franklin-gothic-urw-cond, 'Helvetica Condensed Bold', Helvetica, Arial, sans-serif !important;
    border-bottom: 3px solid #929292;
    color: #768696;
    padding: 12px 0 10px;
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
}

.mostPopular li {
    border-bottom: 1px solid #ddd;
    -webkit-box-shadow: 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0 #fff;
    padding: 7px 0;
    position: relative;
}

.mostPopular li .index {
    color: #4e5daf;
    display: block;
    font-size: 14px;
    float: left;
    line-height: 18px;
    width: 25px;
    font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
    font-weight: 700;
}
.mostPopular li a {
    text-align: left;
    color: #505d69;
    font-family: franklin-gothic-urw-cond, 'Helvetica Condensed Bold', Helvetica, Arial, sans-serif !important;
    font-size: 13px;
    font-weight: 700;
    display: block;
    line-height: 18px;
    width: 235px;
}

.mostPopular li .count {
    width: 40px;
    color: #4e5daf;
    display: block;
    float: right;
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
}
.headLine {
    border-radius: 0px 0px 20px 20px;
    width: auto;
    height: 0px;
    overflow: hidden;
    background: #eee;
    -moz-box-shadow: 0 -1px 0 #83b755, 0 -2px 0 #4b8424;
    background: none;
    border-top: none;
    border-bottom: 6px solid #3c81de;
    position: relative;
    top: 10px;
    margin-bottom: 15px;
}
.mostPopular #pop {
    font-size: 100%;
    position: relative;
    top: -15px;
}
.mostPopular li .index {
    color: #4e5daf;
    display: block;
    font-size: 14px;
    float: left;
    line-height: 18px;
    width: 25px;
    font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
    font-weight: 700;
}
.thumbnaidl {
    border-bottom: 3px solid #27ae60;
    background: #FFFFFF !important;
    margin-top: -25.7px;
    padding: 2px;
}
.t11img {
    width: 23px;
    position:relative;
    left: 90%;
}
<div class="panel panel-default">
<div class="mostPopular">
        <div class="headText"><h3>Most Popular Free SEO Tools</h3>    </div>
        <div id="pop">
            <p class="dlLastWeek">Business SEO Tools</p>
            <ul style="padding: 0; margin: 0; list-style: none;">
<li>
<span class="index">1.</span> <a class="storyTitle" href="link"><span class="OneLinkNoTx">Worth Your Site</span>
<span class="count"><div style="background: #f39c12;" class="thumbnaidl">
<img alt="Worth Your Site" src="https://www.businessseotools.com/theme/default/icons/open_check.png" class="t11img">
</a> </div></span>
</li>
<li>

Hello everyone, I am facing an issue with my website's responsiveness. It looks great on my laptop as shown in this screenshot here

However, when viewed on a phone or tablet, the site appears distorted and not clean, like seen in these images: tablet view

And also here: general view

Your assistance would be greatly appreciated. Thank you very much.

css

Answer №1

So just to clarify, you're looking to achieve a similar look for the 2nd image as the 3rd image, correct?

To align your 2nd image more closely with the 3rd image, consider utilizing the max-width property on the container element that holds your list.

You could try something like this:

@media (max-width: 900px) { // This targets tablet-sized screens

    .your-container-element {
        max-width: 400px; // You can also use relative units like %, rem, or em
    }
}

This CSS snippet will restrict the width of your container, preventing it from becoming too wide.

When dealing with icons or images using floats, you may want to apply float: right to move them towards the edge.

If you're using flexbox, there are numerous solutions available. To delve deeper into this topic and explore code examples, I recommend visiting this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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 merge multiple window.onscroll events together?

One feature is a colorful RGB scroller positioned next to the standard scrollbar, indicating the progress of page scroll. The second feature is a classic "scroll to top" button. FIRST FEATURE HTML <button onclick="topFunction()" id="myB ...

javascripthtmlcssscrollbar

${IDHERE} element's text color not changing when tab is switched

One dilemma I encountered involves displaying a percentage on a webpage with 2 tabs. The percentage is originally shown on the tab that is open when the page loads. The JavaScript code I used is quite straightforward: adaPercentColor(percent, ada) { ...

javascripthtmlcssangular

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

It's time for a new challenge to push my learning curve. I've never ventured into the world of ajax before, but it seems like a skill I need to acquire. What better opportunity to learn than by implementing it on a fresh portfolio site. The main ...

jqueryajaxhtmlwordpresscss

The navbar-brand does not seem to be updating its color properly within Bootstrap 4

Struggling to modify the color of the navbar-brand class with Bootstrap 4? Despite referencing the documentation, I've hit a roadblock in changing its appearance. By adding a new navbar-custom class to customize the navbar-band class, it should have w ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Concealing a div based on a condition

Having difficulty concealing a div once a specific condition is met. The condition depends on the user logging into a web application. In my CSS file, I have set the multipleBox div to visibility: hidden, along with other styling attributes like border co ...

javascripthtmlcssajaxjsf

The function .click does not function properly when used with an anchor element within a figure tag

In my JavaScript-loaded figure, there is an image description and two buttons. Sometimes the description contains a link with a fig attribute, like this: <a fig="allow" href="#tt5">[1]</a> If the anchor is not in a figure and has a fig attrib ...

javascriptjqueryhtmlcss

Utilizing nested LESS statements for styling the :before and :after pseudo-classes

Here is a snippet of LESS code attempting to add a colored background to the :after pseudo-class: .hexagon:after { content: ""; position: absolute; bottom: -50px; left: 0; width: 0; height: 0; border-left: 100px solid transparent; border-r ...

cssclassless

I have created a Joomla Template that incorporates my own CSS through JavaScript. Is there a method to include a distinct version tag to my custom CSS file, such as custom.css?20180101?

My usual method involves adding a unique tag to the css path in the html section, but my template is incorporating custom CSS through Javascript: if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL . &apo ...

javascriptphphtmlcssjoomla

Webpack will only load images that are referenced within CSS files, and it will not load images that are referenced within

Within my dist folder, you will find index.html, contact.html, index.js, contact.js, and two images referenced by my css as background images. For example: background-image: url("../images/prairie.jpg"); These are the only items in my dist folder. Any o ...

javascriptcssreactjswebpack

What is the best way to remove the unwanted border that is showing up at the bottom of the SVG image?

Working with a wave SVG is presenting me with a challenge. I am noticing a border at the bottom that I would like to eliminate. Below is my JSX code: <DarkWave> <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" vie ...

csssvg

How can I change the color of the fa-star symbol from its default yellow to white?

When I set color:white; or use the classes icon-light or icon-white, all font-awesome-icons turn white except for fa-star which stubbornly remains yellow. I've tried various methods to override the CSS, including using !important in inline-styling on ...

csscolorsfont-awesomefont-awesome-3.2

When there is no visible content on the mobile website, it starts scrolling horizontally to the right

Why is the website scrolling to the right when there is no content there? This issue seems to only occur on actual mobile devices when I try to recreate it. Currently in the process of transferring it over, which is why the link appears as it does. Any ...

csshtmltwitter-bootstrapbootstrap-4

Having issues with the presentation of full_numbers pagination in IE while using jQuery dataTables

I am currently utilizing the DataTables jQuery plugin (found at ) with the initialization code below: $('#reconcile_table').dataTable( { 'bSort' : true, 'bFilter' : true, 'bSortClasses' : false, &a ...

jquerycsspaginationdatatables

A two-column bootstrap design with zero padding or gaps

This is the layout I am aiming for: https://i.sstatic.net/4LgVB.png Below is the code I currently have: <div class="row "> <div class="col-lg-6 row-eq-height push-right"> <img src="1.jpg" class="img-responsive"> ...

htmlcsstwitter-bootstrap

Troubleshooting: Django update causing issues with CSS background image display

Recently, I made an upgrade to my Django 1.10 (Python 3.5) app to Django 1.11 (Python 3.6). Most of the functionalities are still intact, however, I am facing a peculiar issue where my CSS background images are no longer rendering (even though they work fi ...

pythoncssdjangoupgrade

Issue with Internet Explorer: Unable to view Drop Down menu

I'm having trouble with the menu I created not working properly in Internet Explorer. Despite being new to HTML/CSS, I followed a tutorial that I found by searching "css drop down menu" and built the menu that currently works great in Firefox, Chrome, ...

cssdrop-down-menumenu

Tips for positioning a hero image perfectly using HTML and CSS

I am looking to display two hero images on the index page and wondering how to align them. My goal is to have both images centered with 50px separation under the header, ensuring they are of equal height. Will using the flex property work for hero images? ...

htmlcss

Maintaining Image Aspect Ratio with CSS Max-width Property

I'm currently facing an issue where I am using max-width to resize images, but they are not scaling proportionally. Is there a way to achieve this with JavaScript/jQuery? Additionally, is it possible to do this without initially knowing the image&apos ...

javascriptjquerycss

Combine multiple .less files into a single .less file without the need for recompilation

I currently have 3 different .less files (1file.less, 2file.less, 3file.less) that I want to combine into a single file called base.less. To import these files into base.less, I am using the @import "1file.less" method. However, upon inspecting the pa ...

cssless

Adjusting the size of Bootstrap alerts while ensuring the close icon remains correctly positioned

Below is the HTML code snippet I am working with: <div class="row mt-2"> <div class="col-lg-5"> <div id="alertmessages"></div> </div> <div class="col-lg-7"> <div class="btn-group-sm"> ...

javascriptcssbootstrap-4