I'm working on a responsive profile page for all devices so I used the bootstrap 4 grid system to divide the page for my needs I wanted the page to look like this:- in desktops and like this:-
so what I have tried is col-sm to work responsibly with small screens
code snippet
/* Profile Main Page Cards , holders...etc */
.holderTitle{
font-family: hana;
font-size: 34px !important;
color:black !important;
text-align: center !important;
}
/* Profile Image Thubmail */
.ProfileAvatar{
border: 1px solid #ddd; /* Gray border */
border-radius: 4px; /* Rounded border */
padding: 5px; /* Some padding */
width: 150px; /* Set a small width */
}
/* Add a hover effect (blue shadow) */
.ProfileAvatar:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.holderText{
color:black !important;
}
.messagebtn{
text-align: center !important;
font-family: hana !important;
}
.fontawsomeBIO{
font-family: hana !important;
}
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops ( large Mointer )
*/
#media (min-width: 1281px) {
/* Profiler Card and Container (Profile Holder) on large Screen */
.profileholder{
width:45%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
.profileholder{
width:70%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
.profileholder{
width:95%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.profileholder{
width:75%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
.profileholder{
width:85%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 90%;
height: auto;
}
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
.profileholder{
width:100%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
<html>
<head>
<title>Responsive Profile</title>
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- Bootstrap CDN Font-awesome -->
</head>
<body>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<div class="row">
<div class="col-sm-6">
<div class="container">
<br>
<div class="card profileholder">
<img class="card-img-top ProfileAvatar" src="..\upload\tmp\img.jpg" alt="alt"></img>
<div class="card-body">
<h4 class="card-title holderTitle">الإسم</h4><br><br>
<a name="PMbutton" id="private" class="btn btn-danger btn-block messagebtn" href="#" role="button">رسالة</a>
<a name="d" id="ds" class="btn btn-dark btn-block messagebtn" href="#" role="button">متابعة</a>
<i class="fas fa-map-marker-alt fas-3x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="col-sm-auto">
<br>
<div class="card ProfileContent">
<div class="card-body">
Content Here tab panel....etc
</div>
</div>
</div>
</div>
</body>
advise :- show code in full page
at least the most important thing is the right container under the col-sm-auto <--- tag well contains a tab panel the panel will have more than 4 tabs which is a lot to fit all screen width in smartphones so the panel will have an x-scrolling any suggestion to make it responsive.
Bootstrap gives you some built in media queries by which you can define your layout.
Extra small devices (portrait phones, less than 576px) No media query
since this is the default in Bootstrap
Small devices (landscape phones, 576px and up) #media (min-width:
576px) { ... }
Medium devices (tablets, 768px and up) #media (min-width: 768px) {
... }
Large devices (desktops, 992px and up) #media (min-width: 992px) {
... }
Extra large devices (large desktops, 1200px and up) #media
(min-width: 1200px) { ... }
You can use mobile first approach to design your layout. Starting from 0px to 575px will be stated first than as you move higher in the resolution you can use media queries to handle your layout. The class col-sm-6 gives you ability to use 6 cols in a row. If you want that col to shrink at large desktop design to 4, you can add col-lg-4 besides col-sm-6. In this way your design will become responsive.
As far as the tab panel is consider, it depends upon your design. You can also apply nested technique or media list approach to handle your design on different resolution. Please consider bootstrap documentation for complete guidance. You can change col-sm-auto to col-sm-6 as well.
Related
I have a twitter bootstrap 3 application and the SVG logo looks great in Desktops but looks truncated in the mobile browsers e.g. iOS Safari.
My very standard code looks like this:
<!-- RD Navbar Brand-->
<div class="rd-navbar-brand brand">
<a class="brand-name" href="/"><img src="images/logo.svg" height="100"></img></a>
</div>
Is there a way, for example, to reduce the logo size in case of mobile device detected?
you can use media queries like this:
/* Large desktops and laptops */
#media (min-width: 1200px) {
.my-logo {
width:300px;
}
}
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.my-logo {
width:250px;
}
}
/* Portrait tablets and small desktops */
#media (min-width: 768px) and (max-width: 991px) {
.my-logo {
width:200px;
}
}
/* Landscape phones and portrait tablets */
#media (max-width: 767px) {
.my-logo {
width:150px;
}
}
/* Portrait phones and smaller */
#media (max-width: 480px) {
.my-logo {
width:100px;
}
}
I am trying my popup form responsive but unsuccessfully.
Any help will be appreciated!
That's the landing page URL - yogavoga.com/2weekdiet
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
max-width: 100%;
height: 100%;
overflow: auto;
background-color: rga(0,0,0);
background-color: rgba(0,0,0,0.85);
padding-top: 65px;
}
.modal-content {
margin: 5px auto;
width: 95%;
background-color: #fefefe;
border: 1px solid #888;border-width:3px;
}
I'd like to make it responsive for mobile as well.
Tried but couldn't get the right result.
You have to use media queries to make your website responsive.
here is the list of media queries for different device sizes:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
Now you have to write device-specific css in one of the above media queries.
like :
#media only screen and (min-width: 600px) {
.modal {
//add Mobile specific css for responsive design.
}
}
I have some HTML and CSS code as shown below:
https://codepen.io/aspnetgal/pen/vaoNPz
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.adv-signup {position: relative;
background-image: linear-gradient( #fff, #eff1f1);
width: 100%; height: 400px; }
.contents {position: absolute; width: 1000px;
height: 200px; background-color:#2183c2;
}
.contents .bg{
background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
margin:0;
}
.text{
font-family: "Ubuntu";
font-weight: light;
color:white;
}
.text h3{
font-weight: bold;
}
.controls
{
}
.btn
{
background: #0c5382;
color:white;
}
h3,h1{
padding: 0px;
margin: 0px !important;
}
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
.adv-signup {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
.contents {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
.contents {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
.contents {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.contents {background: pink;}
}
<div class="adv-signup">
<div class="contents">
<div class="bg">
<h1>test</h1>
</div>
<div class="text">
<h3>Sign up for E-News</h3>
<p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
</div>
<div class="controls">
<input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
>
</div>
</div>
<div>
For desktop, I want the div content which has text (heading and paragraph) and controls to be displayed in single line.
For tablet, I want the div content which has text (heading/paragragh vertically aligned) and controls to be displayed in a single line.
I want for a mobile the div content which has text heading, paragraph, and controls to be displayed in a vertical line.
backing Anji Response, you should write all your CSS under media queries. Below is the list of queries that you should minimum follow.
Min-width: 320px (smaller phone viewpoints)
Min-width: 480px (small devices and most phones)
Min-width: 768px (most tablets)
Min-width: 992px (smaller desktop viewpoints)
Min-width: 1200px (large devices and wide screens)
Note:- Setting with JS is anyway a costly JOB!!!
Updated js fiddle. https://codepen.io/anon/pen/BPXbjx
you need to add the below code.
.contents{
display:flex;
}
#media (max-width:767px){
.contents{
display:block;
}
}
I hope you can do the remaining styles.
I have a mobile layout for the website I am building, where the image of a mobile screen has to always appear a till it's navigation buttons. Below is the design mockup of how the image should look
I am using media queries, the width of the image and margin-top to position it according to the mockup. But at certain viewports, the image appears completely above the screen, which is mostly due to the different viewports resulting in different values for the percentage based units I am using.
An example image of what I am trying to convey:
Is there a better approach to position this image, so that it always shows up to its navigation bar, so that the position is consistent atleast in a particular viewport range, if not every viewport?
Any help is appreciated.
the website for reference : https://hackertronix.com
.mobile-phone-img {
display: block;
margin: 3% auto 0;
width: 70%;
}
#media screen and (min-width:24em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 85%;
}
}
#media screen and (min-width:25.75em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 66%;
}
}
#media screen and (min-width:30em) {
.mobile-phone-img {
margin: 11.5% auto 0;
width: 60%;
}
}
#media screen and (min-width:37.5em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 65%;
}
}
#media screen and (min-width:42em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 55%;
}
}
#media screen and (min-width:48em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 50%;
}
}
#media screen and (min-width:50em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 45%;
}
}
#media screen and (min-width:55em) {
.mobile-phone-img {
margin: 2.5% auto 0;
width: 40%;
}
}
<div class="mobile-card">
<h2>
Tracker
</h2>
<a target="_blank" href="https://play.google.com/store/apps/details?id=tracker.gst.in.gsttracker">
<img src="images/getOnGooglePlay.png" class="mobile-button">
</a>
<img src="images/gst-tracker-pixel.png" class="mobile-phone-img">
</div>
Well known media query resolution for almost every devices.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}
None of the solutions given previously in stackoverflow solved my problem. If anyone has solution to this, then please please please help me. I want: the horizontal scroll bar should appear when the browser is minimized and divs should not overlap each other
html code for header:
<header><label class="font_white">LIZA's World</label>
<nav>
<ul>
<li>hellohello |</li>
<li>HIHO |</li>
<li>Heyhey |</li>
<li>Ciao Ciao Ciao Ciao |</li>
<li><label class="nav_name">Liza</label></li>
<li>
<form id="search" method="get" action="hello.html" style="float:right">
<input type="text" class="searchbar" size="50" maxlength="120" value="Search..." />
<input type="button" class="search_button"/>
</form>
</li>
</ul>
</nav>
</header>
css code for header and nav:
html, body {
overflow-x:scroll;
}
header {
position: fixed;
height: 40px;
top: 0px;
width: 100%;
vertical-align: top;
background:#2748ab;
margin-left:-8px;
}
nav
{
position: fixed;
vertical-align: top;
margin-top:10px;
top: 0px;
float:left;
margin-left:23%;
width:76.5%;
}
I changed the nav as follows:
nav
{
position: fixed;
vertical-align: top;
margin-top:10px;
top: 0px;
float:left;
margin-left:320px;
min-width:1000px;
}
now the overlapping problem is solved but, the horizontal scrollbar problem is not solved yet.
If you measure the total outer width of the layout. and set the min-width of outer div or body. if resize the browser it shown horizontal scroll bar and alignment not varied.
Ex:
.outerdiv{min-width:1240px;}
or
body{min-width:1240px;}
You need to add media in CSS, understand how to add media into css and make your website responsive.
/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024 - desktop (default grid)
1024-768 - tablet landscape
768-480 - tablet
480-less - phone landscape & smaller
--------------------------------------------*/
#media all and (min-width: 1024px) and (max-width: 1280px) {
.logo{
width:80px;
}
}
#media all and (min-width: 768px) and (max-width: 1024px) {
.logo{
width:80px;
} }
#media all and (min-width: 480px) and (max-width: 768px) {
.logo{
width:50px;
} }
#media all and (max-width: 480px) {
.logo{
width:100%;
}
}
/* Portrait */
#media screen and (orientation:portrait) {
.logo{
width:100%;
}
}
/* Landscape */
#media screen and (orientation:landscape) { /* Landscape styles here */ }
/* CSS for iPhone, iPad, and Retina Displays */
/* Non-Retina */
#media screen and (-webkit-max-device-pixel-ratio: 1) {
}
/* Retina */
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}
/* iPhone Portrait */
#media screen and (max-device-width: 480px) and (orientation:portrait) {
}
/* iPhone Landscape */
#media screen and (max-device-width: 480px) and (orientation:landscape) {
}
/* iPad Portrait */
#media screen and (min-device-width: 481px) and (orientation:portrait) {
}
/* iPad Landscape */
#media screen and (min-device-width: 481px) and (orientation:landscape) {
}
You just need to check which resolution you want to make responsive and particular CSS into that media. You need to use more inspect element for testing. You also add responsive menu code. So your header will adjust perfectly.
I will suggest you to use https://webflow.com for developing responsive website. So you dont need to worry about responsive headache.