Before, we had a page looking like this
After we made some modifications we now have a page looking like this
For removing the empty spaces in the page, we did some coding as below.
We are using this code, but responsiveness of the site is gone after using the code below.
Please guide me as to what code changes are needed to maintain responsiveness.
.block.block-list.block-check-delivery{
position : relative;
bottom:85px !important;
}
.p{
float:none !important;
}
.usually{
position:relative;
bottom:90px !important;
}
.dinfo{
position:relative;
bottom:90px;
right:50px !important;
}
.catalog-product-view .add-to-cart-wrapper{
height: 60px;
width:45%;
float:right !important;
}
.sampleclass{
background: rgba(0, 0, 0, 0) url("../images/product_view_line.png") no-repeat scroll;
display: block !important;
}
.text-move{
position:relative;
bottom:21px;
font-weight:bold;
}
.font-move{
font-weight:bold;
position:relative;
bottom:2px;
}
.color-name{
font-weight:bold;
position:relative;
top:2px;
}
.text5{
position:relative;
left:10px;
}
Add the following style in your css and try
#media screen and (max-width: 960px) {
#aitcg_image_container13,
#raphBot_13,
#printable-area-image,
#raphTop_13
{
max-width:100% !important;
}
#aitcg_image_container13{
margin-left:0 !important;
}
}
Related
I'm trying to get two images to display in a row, so I'm using a flexbox. I set the box's height to be 500px, but it almost* always calculates to be 0px. It reminds me of the issue with floating elements within, but I've tried this out with img {display:block} and by nesting the img tags in container divs, but neither seem to work.
= I say "almost" because when viewing on a test page in Chrome 49.0.2623.112 (but not my fiddle) and adjusting the viewport's width, right after the media query flips from the min-width:737px style to the max-width:736px style, the flexbox suddenly has height.
Here's a fiddle: https://jsfiddle.net/territorylit/6v4euuwL/
CSS
.popup_background {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.8);
z-index:100000000;
}
#media screen and (min-width:737px) {
}
#media screen and (max-width:736px) {
}
.popup_background img.button {
position:fixed;
right:0;
top:0;
width:50px;
height:50px;
border: none;
z-index:100000001;
transition:all 0.1s linear;
}
.popup_background img.button:hover {
border-right-style:solid;
border-right-color:rgba(175,0,175,1);
border-top-style:solid;
border-top-color:rgba(175,0,175,1);
}
#media screen and (min-width:737px) {
.popup_background img.button {
margin-right: calc(5% + 3px);
margin-top: calc(5% + 3px);
padding-top:5px;
}
.popup_background img.button:hover {
margin-right: calc(5% + 3px);
margin-top: calc(5% + 3px);
border-right-width:3px;
border-top-width:3px;
padding-right:3px;
padding-top:8px;
}
}
#media screen and (max-width:736px) {
.popup_background img.button {
padding-top:5px;
}
.popup_background img.button:hover {
}
}
.popup_container {
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content:center;
align-items:center;
align-content:center;
flex-direction:column;
overflow-y:scroll;
background-color:rgba(255,255,255,0.9);
}
#media screen and (min-width:737px) {
.popup_container {
margin-left:5%;
margin-right:5%;
margin-top:5%;
margin-bottom:5%;
border-width:3px;
border-style:solid;
border-color:rgba(0,0,0,0.6); /* grey */
box-shadow: 0px 0px 3px 2px rgba(10,123,167,0.2); /* cerulean */
}
}
#media screen and (max-width:736px) {
.popup_container {
margin-left:3%;
margin-right:3%;
margin-top:3%;
margin-bottom:3%;
border-width:2px;
box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.9); /* white transparent */
}
}
.popup_container.top_heavy {
justify-content:flex-start;
}
p.chelsea {
font-family:garamond,serif;
font-size:1.3em;
}
#media screen and (min-width:737px) {
p.chelsea {
max-width:70%;
line-height:140%;
}
}
#media screen and (max-width:736px) {
p.chelsea {
height:auto;
max-width:90%;
line-height:130%;
}
}
p.chelsea.footnote {
font-family:garamond,serif;
font-size:1rem;
text-align:right;
margin-bottom:1.5rem;
}
#media screen and (min-width:737px) {
p.chelsea.footnote {
width:50%;
}
}
#media screen and (max-width:736px) {
p.chelsea.footnote {
width:90%;
}
}
p.chelsea.translation {
font-size:1.2rem;
line-height:150%;
}
p.chelsea img {
width:100%;
}
.milky {
height:500px;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction:row;
justify-content:center;
align-items:flex-start;
align-content:center;
flex-wrap:nowrap;
overflow:hidden;
}
#media screen and (min-width:737px) {
.milky {
width:70%;
}
}
#media screen and (max-width:736px) {
.milky {
width:90%;
}
}
#rotation-01 {
flex:0.6;
}
#rotation-02 {
flex:1.5686;
}
HTML
<div id="section_04" class="section">
<div class="popup_background">
<img class="button" src="http://res.cloudinary.com/territory/image/upload/v1461522074/general/hr_grey_50x50.png" onclick="talkPopUpOff(this.id)" id="section_04_off" />
<div class="popup_container top_heavy">
<p class="chelsea"> </p>
<div class="milky">
<img id="rotation-01" src="https://static1.squarespace.com/static/557a4c2ee4b0fe5a537746b5/t/58b76175bf629a06758f0e2c/1488413284637/milky-way-rotation-1.jpg" />
<img id="rotation-02" src="https://static1.squarespace.com/static/557a4c2ee4b0fe5a537746b5/t/58b7618b8419c2a168e77ac6/1488413330003/milky-way-rotation-2.jpg" />
</div>
<p class="chelsea">“...in the absence of a bright star near the celestial south pole, Quechua peoples and their ancestors organized the sky by reference to the Milky Way, called Mayu or the “celestial river,” and its apparent cruciform rotations. In a twenty-four-hour period, the Milky Way forms two intersecting intercardinal axes that divide the heavens into quarters. Since the plane of the Milky Way is inclined in relation to the earth’s axis, the stars of one quarter will rise as those of the opposite quarter set as the earth rotates. Astronomical phenomena can be tracked with respect to these quarters, which create a systematic means for the spatial and temporal reckoning of the world and its natural and social rhythms. This principle is central to pre-Columbian spatial reckoning.”</p>
<p class="chelsea footnote">Gartner, William Gustav. "6· Mapmaking in the Central Andes." <em>Americas</em> 169 (1970): 647-54.</p>
<p class="chelsea"> </p>
</div>
</div>
</div>
Your problem is that .popup_container is a flexbox.
Simply change .popup_container to display: block, take the height off of .milky, and I believe it will behave as you would like.
Why?
The items within the .popup_container flexbox (such as your content, images, and footnote) automatically try to share all the vertical space, which is 100% of the display height, since .popup_container is a descendant of .popup_background, which has height: 100%. However, there is an exception. For some reason (if anyone knows why I'll be glad to include it), the text content takes precedence over the flexbox with the images. While the text gets to use up all the space it needs, the flexbox is reduced to barely anything. Your height property on the flexbox is obsolete because it is, itself, a flexbox item.
Also note: it's bad practice to have a fixed element the child of a fixed element, which is what you currently have. The inner element doesn't need to be fixed at all.
I have a carousel menu and i want to create a description box when you hover over each element. The problem is that when i put the position of it on absolute it does not show the whole description box that goes outside the div. When i put the position on absolute the description box scrolls down when i scroll down the page and i dont know what to do about it. Has anyone any idea how to solve this?
CSS
.carousel-component {
position:relative;
overflow:hidden; /* causes the clipping */
display:none; /* component turns it on when first item is rendered */
}
.carousel-component ul.carousel-list {
width:10000000px;
position:relative;
z-index:1;
}
.carousel-component .carousel-list li {
float:left;
list-style:none;
overflow:hidden;
}
.carousel-component .carousel-clip-region {
overflow:hidden; /* Secret to the clipping */
margin:0px auto;
position:relative;
}
/**
* ==============================================================================
* Safe to override. It is safe to override background, padding, margin, color,
* text alignment, fonts, etc. Define a separate CSS file and override your style
* preferences.
**/
.carousel-component {
/* padding:0px;*/
/* -moz-border-radius:6px;*/
/* color:#618cbe;*/
}
.carousel-component ul.carousel-list {
margin:0px;
padding:0px;
line-height:0px;
}
.carousel-component .carousel-list li {
text-align:center;
margin:0px;
padding:0px;
}
.carousel-component {
padding: 0px 16px; /*8px 16px 4px 16px;*/
margin:0px;
}
.carousel-component .carousel-list li {
margin:0px 10px;
width:78px; /* img width is 78 px + a.border-left (1) + a.border-right(1) + img.border-left (1) + img.border-right (1)*/
height:78px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
/* margin-left: auto;*/ /* for testing IE auto issue */
}
.carousel-component .carousel-list li a {
display:block;
outline:none;
}
div.desc_box {
display: none;
border-radius:5px;
border: #000000;
position: absolute;
padding:0.5rem;
background: #000000;
color: white;
height:150px;
width: 450px;
margin-bottom: 25%;
overflow-x: visible;
-webkit-transform: translateY(1em);
transform: translateY(1em);
}
.carousel-component .carousel-list li img {
display:block;
}
.carousel-component .carousel-prev {
position:absolute;
top:20px;
z-index:3;
cursor:pointer;
left:5px;
}
.carousel-component .carousel-next {
position:absolute;
top:20px;
z-index:3;
cursor:pointer;
right:5px;
}
Html and Jquery
https://gist.github.com/teaxhillari/71f68a15c8820715e367
If you need to show your popup boxes on your page in a specific, non-scrolling position relative to the browser window then you can use position: fixed for instead of position: absolute. Fixed position positions it relative to the browser window, and so it won't move with scrolling. But, if you do need it to be positioned relative to a parent element, then this won't work because the parent element essentially becomes the browser window.
Hello fellow stackers.
I have used display:flex on a div which sits in the middle of the Y and X div, as you can see here. However I want to make it responsive, which it NEARLY is! When I resize the browser wide down to around 250 pixels the div and the text within the div just stops responding.
Now I understand that if I remove display:flex it will allow the text to continue responding. However, when I do so the alignment drops to the bottom of the div. The misalignment doesn't display when I remove display:flex though which leads me to believe that there is something in my code which relies on display:flex to retain the alignment. You can view the website here. Please find the code below, and the Jsfiddle in the link above. Much obliged.
#registry {
background-color:#fff;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
}
.pane {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
min-height:50vh;
padding:6rem 1.5em;
position:relative;
width:100%
}
.pane .pane-title, .pane .title-section {
margin-bottom:2em;
}
.pane-title h2{
font-family: 'Abril Fatface', cursive;
text-transform: uppercase;
font-size: 1.875em;
}
#media (max-width:222px){
.pane-title h2{
font-size:1.3em;
}
}
.pane .pane-content {
max-width:68em;
margin-left:auto;
margin-right:auto
}
.pane .pane-content::after {
clear:both;
display:table
}
.pane .pane-row {
display:block;
margin-bottom:3em
}
.pane .pane-row::after {
clear:both;
display:table
}
.pane.flex {
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
flex:1;
flex-direction: column
-ms-flex-line-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center
}
.pane.flex .pane-content {
-webkit-align-self:center;
-ms-flex-item-align:center;
align-self:center
}
#registry {
background-image:url(http://kadeem.london/Content/Image/KL.png);background-color:#e94378;
-webkit-background-size:cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
min-height:110vh
}
#registry .pane-content {
max-width:48em;
background-color:#fff;
padding:6em 2em
}
#media screen and (min-width:768px) {
#registry .registry-description {
float:left;
display:block;
margin-right:2.12766%;
text-decoration: none;
width:65.95745%;
margin-left:17.02128%
}
#registry .registry-description:last-child {
margin-right:0
}
#registry p {
text-align:center
}
}
.registry-description p a{
text-decoration: none;
border-bottom: 1px solid #000;
color: #000;
}
.registry-description p a:hover{
text-decoration: none;
background-color: #000;
color: #fff;
}
<section id="registry" class="pane flex">
<div class="pane-content">
<div class="pane-title">
<h2>Get In Touch</h2>
<span class="underline"></span>
</div>
<div class="registry-description">
<p>I hope your liking my website so far. If you would like to work with me you can give me a call or message me on the email below. Alternatively you can view more of my articles, designs, and projects.
</p>
<br>
<button class="connn"><a>contact#kadeem.london</a>
</button>
</div>
</div>
</section>
Your contact button (contact#kadeem.london) is what is stopping the content from resizing down any further.
However, having said that, you probably don't need to worry about supporting devices that narrow - all devices I'm aware of are at least 480px wide in portrait orientation.
I can't seem to make that image appear in my logo square, why?
background-color works perfectly well, but in this one the image won't appear and when I inspect with Chrome it gives that yellow warning + it bars it.
Can anyone help me figure it out?
I tried adding it in the HTML code already, if that helps..
.logo {
margin:auto;
width:150px;
height:150px;
background-image: url=('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
}
#logotext {
color:red;
position:absolute;
margin-left:50px;
margin-top:62px;
}
#navbar {
background-color:black;
height:50px;
width:800px;
margin:auto;
margin-top:38px;
}
#navbartext {
color:white;
position:absolute;
margin-top:15px;
margin-left:370px;
}
#content {
background-color:black;
height:650px;
width: 800px;
margin:auto;
margin-top:38px;
}
#contenttext {
color:white;
position:absolute;
margin-left:370px;
margin-top:300px;
}
#footer {
background-color:black;
margin:auto;
height:75px;
width:800px;
margin-top:38px;
}
#footertext {
color:white;
position:absolute;
margin-left:370px;
margin-top:25px;
}
You made a syntax error, remove = from your code.
Wrong:
background-image: url=('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
Correct:
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
change this class..
.logo {
margin:auto;
width:150px;
height:150px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
}
This is the proper way to use the background-image property in css.
background-image:url('paper.gif');
So in your case it will be:
background-image:url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
JsFiddle
remove = in your url=('')
it should be..
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
Check CSS:
background-image: url('http://upload.wikimedia.org/wikipedia/commons/9/9c/Osaka_-_Night_View.jpg');
I don't have iPad, so i can't test properly, online simulators aren't reliable enough, it seems.
Problem: (client's words)
The site loads perfectly in both portrait and landscape. But, if I view in landscape, and then rotate the screen, the portrait view is off to the left as before, but not quite as bad.
Image: CENSORED NSFW IMAGE
Link: http://bybyweb.com/london (Warning: NSFW content)
Note: it happens in all browsers, except mercury.
I have used media queries for 'portrait' view, since iPad in landscape mode (1024px) should show desktop version properly.
CSS:
#media screen and (min-width : 767px) and (max-width: 1023px) {
#date h1 {
font-size:48px;
line-height:88px;
margin:-3px 0 0 340px;
padding:0;
color:#fff;
letter-spacing:0px;
word-spacing:0px;
font-weight:bold;
}
#joinform {
float: right;
width: 525px;
height: 500px;
left: 300px;
position: absolute;
z-index: 7;
padding-left: 5px;
padding-top: 6px;
overflow:hidden;
}
#member-login {
position:absolute;
left:470px;
top:15px;
}
#members-signup {
width:180px;
}
#members-area h2 {
line-height:30px;
font-size:30px;
margin:0 0 0 15px;
padding:65px 0 0 0;
font-weight:bold;
color: #454545;
}
#members-list {
width:500px;
height:220px;
float:left;
overflow:hidden;
}
#members-list h3 {
line-height:20px;
font-size:20px;
margin:0px;
padding:25px 0 5px 0px;
font-weight:400;
}
#content {
width:100%;
}
#about-area {
width:100%;
}
#about-area p{
width:90%;
}
#about-area h3 br{
display:none;
}
#about-area p br {
display:none;
}
#join-img-holder {
width:100%;
}
#members-area {
width:100%;
}
#logo-area {
width:100%;
}
#footer-content {
width:100%;
}
}
Complete page css link: http://bybyweb.com/london/css/style.css
What i am doing wrong?
P.S. Fix with position:relative didn't solved my problem, there is still a lot of empty space in 'portrait' view?! I would appreciate help. It is strange that issue occurs after orientation change.
And answer is: problem was width of one element - #joinform.
I have decreased width to 463px, and now all works fine.
It seems that overflow: hidden didn't work: iPad tend to 'show' hidden content, and to 'push' elements on page, if needed.
So, sum of widths shouldn't be more than 100% in any case, iPad doesn't tolerate it.
Also, i got good advice related to iPad testing - Google Chrome emulator (included in latest version) is very reliable (errors was visible in emulation).
I hope this will help to someone.