There is a website I am handling https://www.onlinesalebazaar.in/.
When opened on Android it looks fine, but on Apple, the UI is distorted. Beneath the slider it's intended to show 2 images horizontally but on iPhone it is distorted.
I tried changing the CSS to width 49% etc, but nothing works.
Styles used is as follows:
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 50%;
}
}
Can someone help please on this
Bootstrap is causing this to happen with this bit of CSS:
.row:before,
.row:after {
display: table;
content: " ";
}
Safari on iOS counts these pseudo elements as actual elements thus causing the flex container to have an additional child element before and after it.
By adding the CSS below it will make the items appear properly in iOS Safari:
.row:before,
.row:after {
display: none;
}
This may have an undesired effect elsewhere so it's probably recommended to add a class to target those rows that use flex and do something like this instead:
.myFlexRow.row:before,
.myFlexRow.row:after {
display: none;
}
You're using Bootstrap 3.2 for your site which wasn't built with flexbox in mind. With Bootstrap 4+ you would simply be able to use the .d-flex class instead.
Related
Im trying to build a responsive navigation using flexbox. I have the desktop version looking fine. But when it enters the phone media query, I want the order of the items to change. I want the logo above the navigation links on its own line, and the 4 nav links below centrally aligned. I have tried everything so I come to the great people of stack overflow for help.
link to code:
http://codepen.io/Davabo/pen/EKNBMz
* {margin:0; padding:0; font-weight: normal;}
$phone: 480px;
#mixin phone {
#media (max-width: #{$phone}) {
#content;
}
}
.menu{
display:flex;
height: auto;
max-width: 100%;
a{text-decoration:none;color: black;padding:20px;}
& > div {
flex: 2;
font-size: 20px;
text-align: center;
padding-top: 30px;
}
.logo {
width: 100%;
flex: 1;
padding-top: 40px;
text-align: center;
}
#include phone {
.logo {
background: pink;
text-align: center;
flex: 5;
flex-grow: 5;
}
.nav1, .nav2 {
flex-basis: 100%;
width: 100%;
}
}
}
I have attached what I want the phone navigation to look like:
http://prntscr.com/afwt0g
Thank you so much for any help!
You need to use a combination of the order and flex-grow properties on the items e.g.
#media screen and {max-width: 480px){
.menu{flex-wrap: wrap;}
.logo{order: 1; flex-grow: 2;}
.nav1{order: 2; flex-grow: 1;}
.nav2{order: 3; flex-grow: 1;}
}
Order rearranges the order of items within a flex container.
Flex-grow works out the sizing of an element compared to it's siblings within a flex container
wrap on the container forces items to wrap when the container width forces it
Here is a link to a good flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
JS FIDDLE
This is my page, when you make the browser width less than 960 px
The first gird box will be diappeared on Firefox,
But it still shows on Chrome.
How to make it has the same behavior on both Chrome and Firefox
Css
.container {
.categorysection {
margin: 0 auto;
max-width:960px;
&.grey {
background: #eee;
}
}
.grid-col {
text-align: center;
display: block;
float: left;
margin: 8px 6px;
}
}
#media screen and (max-width: 960px) {
.grid-col {
float: none !important;
}
}
The problem is that page title that says "finance". That title is floating left, and pushing the first block off screen.
You can either remove the floating from it, or clear the floating flow from the columns:
#media screen and (max-width: 960px) {
.grid-col {
float: none !important;
clear: both;
}
}
Looks like the float:left on the header (.container h3.heading) is breaking it. Remove it and it will work but you'll have to add a "row" class on the h3.
here my website I´m working on: http://www.whatsahoy.com/
My problem: I want the input field next to the button. If I add a float left, it goes next to each other but with a weird <br>. And then the whole thing is also on the left. I want it to be in the middle.
Can somebody help me please?! Thank you very much!
Barbara
To provide you with the best solution, it would be helpful to see the source code of your form. The <br> is probably in there somewhere. However, here is my reply based on what I can see. If it does not help, I suggest you update your question.
Adding the following styles to your custom CSS will put the field and button next to eachother until screen width of 767px.
.wpcf7-form p {
display: inline-block;
width: 470px;
max-width: 95%;
}
.wpcf7-form p br {
display: none;
}
If you would like them next to eachother on smaller screens, you could change the width of the frame. This changes on 767px as set by your theme. I'm not sure this will not have an undesired effect elsewhere on your site, but you could try.
#media only screen and ( max-width: 767px ) {
.et_pb_row {
width: 600px;
}
}
However, it then will be crippled on screens as from 600px. It may be better to make the text field smaller then...
#media only screen and ( max-width: 600px ) {
.wpcf7 input {
max-width: 50%;
}
}
You might want to fine tune this a bit, but I hope you get the idea.
GL!
.wpcf7-form-control-wrap {
display: inline-block !important;
margin: -8px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
display: flex !important;
justify-content: center !important;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
border-radius:0px !important;
width: 30%;
}
#media only screen and (min-width: 50px) and (max-width: 600px) {
div#wpcf7-f698-p10-o1 {
width: 130%;
}
#media only screen and (min-width: 50px) and (max-width: 600px) {
input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
width: 235px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
display: flex !important;
padding-right: 70px;
}}
I have a gallery of floated thumbnails which I'd like flush against both sides of the containing div, but with whitespace between them.
JSfiddle of the desired behaviour.
Relevant CSS:
.thumb {
display: block;
float: left;
width: calc((100% - 72px)/3);
margin-top: 18px;
margin-right: 36px;
transition: opacity 750ms ease-in-out;
}
#media screen and (max-width: 1553px) {
.thumb:nth-child(3n+3) {
margin-right: 0;
}
}
#media screen and (min-width: 1554px) and (max-width: 2059px) {
.thumb {
width: calc((100% - 108px)/4);
}
.thumb:nth-child(4n+4) {
margin-right: 0;
}
}
#media screen and (min-width: 2060px) {
.thumb {
width: calc((100% - 144px)/5);
}
.thumb:nth-child(5n+5) {
margin-right: 0;
}
}
In Chrome and Firefox on OSX, at some resolutions (such as 1024px), the thirteenth thumbnail centres itself in the container and puts all the :nth-child styles out of whack, breaking the layout below. I've changed the order of the thumbnails, but it's always the thirteenth one. Thinking it may have something to do with fractions of pixels resulting from the calc() division, I subtracted 1px from the width of the thumbnails, with no luck either.
I don't see any relevant difference between what I've done in the JSfiddle and the WIP site. What am I doing wrong?
Well it's not your real answer, but i think you are getting hard to your self!
There are very cool and easy ways to create what you want.
I recommend you to read more about Foundation Block Grid and FlexBox.
don't try to reinvent the wheel.
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}