This is the problematic Link. I have an element called tbox in CSS. It is an inline box having width:100%. On the homepage it adjusts its width according to its parent perfectly and is perfectly responsive, but when I enter into the post, its width changes according to the content inside. Here are some
screenshots
And this is the post, when I open it-
This is the code for tbox
.tbox{
display: inline-block;
width: 100%;
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
When I change the width to 850px, it works well on desktop but I can't override the width in responsive design. It always remains 850px.
So how to make it responsive, if the width is 850px? Or is there any other solution?
The problem is not with tbox search your code for .item .post.hentry and change width: 850px; to max-width: 850px;
.item .post.hentry {
max-width: 850px;
}
you can use media query for responsive as like and this code must write bellow main css as like first your main css
.tbox{
display: inline-block;
width: 90%; // change it as you want
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
then write above code bellow
#media (max-width:780px) {
.tbox{
display: inline-block;
width: 100%; // change it as you want
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
}
You need to add box-sizing property in .tbox class -
.tbox {
display: inline-block;
width: 100%;
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
box-sizing: border-box; // add this property in main css
}
try writing media queries like this ,then your div will be responsive
.tbox{
display: inline-block;
width: 100%;
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
#media(max-width:767px) {
.tbox{
display: inline-block;
width: 90%; //change percentage here
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
}
#media (max-width:1024px) and (min-width:768px) {
.tbox{
display: inline-block;
width: 100%; //change percentage here
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
}
#media (max-width:414px) and (min-width:100px) {
.tbox{
display: inline-block;
width: 70%; //change percentage here
height: auto;
padding: 2px;
background-color: #FFFFFF;
border-radius: 25px;
}
}
Related
the gray buttons show on top of the gif image in mobile version also they are not responsive and show quite big. If you have any ideas i would highly appreaciate.
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
<div class="imagebox">
<img src="https://media.gettyimages.com/photos/young-man-at-sunset-picture-id496261146?s=612x612" width="472px" height="423px" />
</div>
<div class="textbox-cont">
<div class="textbox">
<button style="background-color:#CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;">Natural Silver</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 160px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px; ;">Night Blue</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Cardinal Red</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Coral Orange</button>
<br>
<p><b>Custom colors are available upon request.</b></p>
</div>
</div>
I think one way you could approach this is use flexbox. Based on your question, this should work for you:
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
}
Also, your buttons appear large likely because you have not adjusted their size in the media query. You will need to move the button styles out of your html and into your css file for the media query to work, since the inline css will override the referenced css file.
add position: absolute to tour class .imgbox
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: absolute; //ADD POSITION ABSOLUTE
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
I recommend you use one single class to your buttons, and dismiss the "style" attribute, to this way your code is more clean
I am having trouble with menu icons aligning to the right.
So far I have my logo on the left and the menu icons on the right, however their order is reversed. Instead of home, portfolio, contact it displays as contact, portfolio, home. I understand that this is because the li is set to float left. However, when I float the links to the right to have them display in the correct order, the entire links menu will move to the left, leaving a large gap to the right of the last link. (I want the links to display on the far right of the header browser window and my logo on the far left). In my attemps to fix the order of the links, I messed up their positioning within the header.
Currently it is optimised for mobile devices and re-sizing the window will create a hamburger icon and the menu drops down with the text centered left. I want this unchanged, I just want my links to be positioned in the correct order and far right as possible on browser windows in the correct order.
I also had a friend (using a larger monitor) have the links show up in the middle of the header which I am not sure why that is happening as they display correctly on my screen.
Any help would be greatly appreciated :D
Codepen with the preview is here; http://codepen.io/AnishaDesigns/pen/wdzNQq
*{
margin: 0px;
padding: 0px;
}
#font-face {
font-family: 'Coolvetica'; /*Font name*/
src: url('coolvetica.ttf'); /*URL to font*/
}
body {
background-color: #E6E9EC;
}
ul {
float: right;
list-style: none;
width: 50%;
height: 60px;
padding: 0px;
font-family: 'coolvetica';
font-size: 13px;
text-transform: uppercase;
letter-spacing: 5px;
}
li{
display: inline;
float: right;
width: auto;
height: 60px;
background: #A62841;
margin-right: 20px;
}
li a{
display: block;
float: left;
height: 60px;
line-height: 60px;
padding: 0 5px;
color: #E6E9EC;
text-decoration: none;
}
header {
float: left;
width: 100%;
height: 60px;
background-color: #A62841;
}
header #branding{
margin:0px;
padding: 10px 0px 5px 20px;
float: left;
}
#media (max-width: 768px){
.menu-icon{
display: block;
width: 32px;
height: 32px;
background:url("images/menu-icon.svg") no-repeat center;
position: absolute;
top: 13px;
right: 16px;
}
header nav ul{
overflow: hidden;
height: 0px;
width: 100%;
background: #A62841;
padding: 0px;
margin: 0px;
}
header nav ul.open{
height: auto;
}
h1{
width: 100%;
float: left;
margin-left: 20px;
}
header nav ul li {
width: 100%;
height: 50px;
margin-right: 0px;
margin-bottom: 10px;
}
header nav ul li a {
width: 100%;
float: left;
margin-left: 20px;
line-height: 50px;
}
header{
height: 60px;
width: 100%;
}
}
I have edited the code and added float:left; to li and changed to width: auto; for ul.
ul {
float: right;
list-style: none;
width: auto;
height: 60px;
padding: 0px;
font-family: 'coolvetica';
font-size: 13px;
text-transform: uppercase;
letter-spacing: 5px;
}
li{
display: inline;
float: left;
width: auto;
height: 60px;
background: #A62841;
margin-right: 20px;
}
http://codepen.io/athira151292/pen/JNRzjo
Apply float:left to li elements and assign width:auto to the ul element. If you want fix some width for ul then use max-width:50% for that.
ul {
float: right;
list-style: none;
width:auto;
max-width: 50%;
height: 60px;
padding: 0px;
font-family: 'coolvetica';
font-size: 13px;
text-transform: uppercase;
letter-spacing: 5px;
}
li{
display: inline;
float: left;
width: auto;
height: 60px;
background: #A62841;
margin-right: 20px;
}
DEMO
change the width of ul from 50% to auto and float:left
I really thought I knew how to do this, and I know there are a LOT of questions about this, but I haven't seen an answer that matches my ludicrously simple case.
Here's the html:
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div id="examined-evidence-close-button" class="button"></div>
<div class="clear"></div>
</div>
</div>
And here's the css:
#examined-evidence {
z-index: 1000;
display: none;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background-image: url('../assets/images/transparent_grey_tint.png');
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: center;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
...but, despite setting almost everything to inline-block, the close button div still displays BELOW the text div, in IE and in Chrome.
(And just FYI, the img src gets set from javascript, so please don't worry about that.)
If anyone has any ideas, I'm dying to show this web page who's boss. What did I screw up this time?
Drop your close button into an inline-span inside the p element, adjust your margins, and you should be all set:
#examined-evidence {
z-index: 1000;
position: absolute;
left: 25%;
top: 10%;
width: 50%;
height: 80%;
background: dimGray;
border: 1px solid #33ffff;
padding: 0px;
margin: 0px;
}
#examined-evidence.active {
display: inline-block;
}
#examined-evidence #examined-evidence-details {
background-color: #333333;
}
#examined-evidence #examined-evidence-details .heading {
padding: 0px;
float: left;
display: inline-block;
}
#examined-evidence #examined-evidence-details .heading p {
text-align: justify;
padding: 3px 12px 3px 12px;
display: inline-block;
font-size: 0.75em;
position: relative;
width: 100%;
color: white;
margin: 0px;
}
#examined-evidence #examined-evidence-image {
text-align: center;
margin: 0px auto;
height: 80%;
width: auto;
}
#examined-evidence #examined-evidence-image img {
height: 80%;
}
#examined-evidence-close-button {
background-color: red;
display: inline-block;
float: right;
height: 34px;
width: 34px;
padding: 0px;
position: relative;
margin: 0px 15px 10px 10px;
}
.clear {
clear: both;
}
<div id="examined-evidence">
<div id="examined-evidence-details">
<div class="heading"><p><span id="examined-evidence-close-button" class="button"></span>I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.I would like this text to float left and, if necessary, flow AROUND the close button which, ideally, would stay put in the top right corner, where most reasonable people would expect a close button to sit. Surely this should be more straight forward.</p></div>
<div class="clear"></div>
</div>
</div>
I'm trying to create a popup with 2 inner divs with responsive sizing.
I thought I could achieve this by setting their width and height as percentages of the parent div but it doesn't seem to work. If you resize your browser window, the leftArea div in my jsfiddle falls out of the popup div.
How can I fix this?
jsfiddle
Use box-sizing: border-box; property to set the padding and border inner the box width.
Check more docs here: box-sizing - CSS
body {
background-color: black;
}
.popup {
position: absolute;
margin: 0 auto;
width: 80vw;
height: 10vh;
left: 0%;
right: 0%;
top: 50%;
display: block;
background-color: orange;
border: 2px solid white;
border-radius: 15px;
}
.leftArea {
position: relative;
float: left;
width: 85%;
height: 98%;
margin: 0px;
background-color: red;
border-radius: 14px 0px 0px 14px;
border: 0px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box; /* Use this property to set the padding inner */
display: inline-block;
text-align: left;
}
.rightArea {
position: relative;
float: right;
width: 12.25%;
height: 100%;
background-color: #123456;
margin: 0px;
display: inline-block;
border-radius: 0px 14px 14px 0px;
border: 0px;
}
<div class="popup">
<div class="leftArea"></div>
<div class="rightArea"></div>
</div>
I have to develop a webpage with three div elements with varying widths. I am using the below snippet to do so .
page1.html
<div id="wrapper">
<div id="left_pane>Left Pane</div>
<div id="main_pane">Main Pane</div>
<div id="right_pane>Right Pane</div>
</div>
page1.css
#wrapper{
font-size: 20px;
letter-spacing: 0px;
white-space: nowrap;
line-height: 12px;
/*overflow: hidden;*/
width: 100%;
}
#left_pane{
width: 10%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
#main_pane{
width: 70%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
#right_pane{
width: 20%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
The problem is that while this works fine, in the main pane I have source of dynamic content and when it increases I want other divs to increase there size as well, but none of them are increasing with increase in content. Can anyone please help me with the same ?
( I also tried using display:table-cell but for that I cannot specify the separate width, as I want each div to be of a specified width )
Thanks and Regards
Just remove the white-space: nowrap; and add word-wrap: break-word;
#wrapper{
font-size: 20px;
letter-spacing: 0px;
line-height: 18px;
width: 100%;
word-wrap: break-word;
}
Check this Demo