Responsive CSS/HTML for Tablet or Mobile Device

Question

I have created a landing page for a SharePoint site with graphics. I have noticed that when resizing the browser window to that of something like a tablet or mobile device, the page/graphics aren't responsive and adjusting to the sizing.

I came across a few posts in relation to my issue, but none were very helpful.

Here is my HTML/CSS:

html, body {
    margin: 0;
    height: 100%;
}
.img_container {
    border: none;
    width: 70%;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #b3ab7d;
}
a:hover {
    color: #b3ab7d;
}
.background {
    background: #104723;
    width: 150px;
    height: 150px;
}
.img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
a {
    display: block;
    text-align: center;
}
.text{
  font-size: 70%;
}
*{
    box-sizing: border-box;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
h1{
  text-align: center;
  color: #104723;
  top: -10px;
}


    G3G Controls




    
    
        
        Access Control (AC)
    
    


    
    
        
        Identification & Authentication (IA)
    
    


    
    
        
        Media Protection (MP)
    
    


    
    
        
        Physical Protection (PE)
    
    


    
    
        
        System & Communications Protection (SC)
    
    


    
    
        
        System & Information Integrity (SI)

Tushar saxena · Accepted Answer

You have used flexboxes that was enough to make stuff responsive the property you were lacking was setting a flex-wrap:wrap for the .center class which will let the images wrap to the next line as soon as the width of the container element reduces.

AlsoThe .img_container for the images was creating an issue due to its width:70% and it also needs to be set to display:flex which will allow these images to accommodate side by side as you want. I also changed The container element .center width to 100%.

The Proposed Code

html, body {
    margin: 0;
    height: 100%;
}
.img_container {
    display:flex;
    border: none;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #b3ab7d;
}
a:hover {
    color: #b3ab7d;
}
.background {
    background: #104723;
    width: 150px;
    height: 150px;
}
.img {
    width: 100%;
    display: block;
    margin: 0 auto;
}
a {
    display: block;
    text-align: center;
}
.text{
  font-size: 70%;
}
*{
    box-sizing: border-box;
}
.center {
    width:100%;
    display: flex;
    justify-content:center;
    flex-wrap:wrap;
}
h1{
  text-align: center;
  color: #104723;
  top: -10px;
}

The Topic


    
    
        
        Access Control (AC)
    
    


    
    
        
        Identification & Authentication (IA)
    
    


    
    
        
        Media Protection (MP)
    
    


    
    
        
        Physical Protection (PE)
    
    


    
    
        
        System & Communications Protection (SC)
    
    


    
    
        
        System & Information Integrity (SI)

One Important thing - In your code snippet in the HTML you have declared a

heading at the top inside a tag. Pls don't do this tag is always used outside the element that too to declare meta data which doesn't supposed to be visible in the browser. Their are other `semantic tags` to use inside the element and I think you might have got confused with
tag which can be used inside the element.

Do tell me whether I was of any Help :)

Responsive CSS/HTML for Tablet or Mobile Device

Answers (1)

Related Questions