Search code examples
cssimagealignmenthrefsrc

Unfixed Responsive design styling

Updated!!!

I've still facing the same error each time I view the page on landscape screen devices.

CSS:

f5 {
    text-transform: uppercase;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}

about.us

<div class="containerpreview">
    <br>
         <f5>Check out our products</f5>
    <br>
         <f6>and Experience no-frills delivery</f6>
    <div style="margin-top:40px">
        <div class="buttoneshop"><a href="...">Eshop</a></div>
    </div>
</div>

is there a way to make the spacing in between closer? When I command out 

text-transform: uppercase;

the spacing is fine.

enter image description here

Aside of that, is there a way to make an image inside src under href to be centered?

enter image description here

css

.images_1_of_4 img {
    max-width: 100%;
    <!-- height: 200px; -->
    width: 200px;
    align: middle;
}

.img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
 }
.grid_preview {
    height: 200px;
}

shop.php

<div class="grid_1_of_4 images_1_of_4">
    <div class="grid_preview">
        <a href="..."><img src="..." alt=""></a>
    </div>
</div>
Solution

  • Try to change alignment text-align : justify; to text-align : left.

    Or, if this is not what you like to do, letter-spacing is a CSS attibute to change space between charagcters, and word-spacing to change space between words