I am getting Mobile view issue, whenever I am loading the website it is going in the right direction. Every section is equal sized but dont know why this is happening. This problem is only with iphones..
I tried adding this code:
body{
overflow:hidden;
}
but it is also not working. Please help me solving this issue.
website link:
http://demo.lamppostmedia.in/arklan1
I have inspected it on iPhoneX which device width is 375px.
and you are giving width: 400px; to wrapper, which is creating horizontal scroll bar.
#media (max-width: 767px)
.wrapper {
margin-left: -15px;
width: 400px;
margin-top: -90px;
}
you can use it like below.
#media (max-width: 767px)
.wrapper {
margin-left: -15px;
max-width: 400px; // modified
width:100%; // added
margin-top: -90px;
}
Related
I'm looking for an help with a little challenge (for me a big one): I need to center align the logo of this header ( https://mastercanapa.com/ ) on mobile version... I tried every solution found online, but nothing helped. Someone can help me with this?
Add to your css or style tag:
#media (max-width: 620px) {
.btLogoArea {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
}
.btMenuVertical .btLogoArea .logo {
float: none;
display: inline-block;
}
}
Normally mobile design visible when browser width lower then 768px, but in your website mobile design visible when browser width lower then 1200px. So just add below CSS in your style.css file.
#media (max-width: 1200px) {
display: flex;
justify-content: center;
float: none !important;
}
Try this i hope it'll resolve your issue. Thanks
I would like my Bootstrap layout to not act responsive when the width is 768px or smaller. You can view my current application HTML / CSS here, https://codepen.io/anon/pen/xXdYNa. I have had to make some changes to some of the standard Bootstrap styles so it might make things a bit more tricker.
Does anyone have any tips on how to achieve this by using CSS overrides, similar to what I have done here:
#media (min-width: 768px) {
.main {
padding-left: 250px;
padding-top: 89px;
}
}
Thanks!
How about just giving .container-fluid a min-width with 768px?
EDIT:
Adding the following worked for me:
.container-fluid {
min-width: 768px;
}
.main {
padding-left: 250px;
padding-top: 89px;
}
A min-width in combination with removing the media query which is around your .main should work.
https://codepen.io/anon/pen/EwmEXr
#media only screen and (max-width: 768px) {
.main {
padding-left: 0px;
padding-top: 0px;
}
}
Getting what appears to be rogue margin off of a google map element. The gallery should be on the right but this margin is stopping that. Can't seem to find what's producing this margin. Even the element inspector 'Metrics'? tool shows there is no margin, but the element highlighting on the screen shows a margin that pushes to the right edge of the page
My CSS for the element.
.gallery-map {
height: 320px;
}
#media (min-width: 415px) {
.gallery-map {
height: 416px;
}
}
#media (min-width: 780px) {
.gallery-map {
height: 500px;
width: 500px;
}
}
Explicitly set margin and margin-right to 0, tried to contain it in a wrapping div (that removed the rogue margin from the map element and put it on the new wrapping element) and several other things.
A link to the branch I'm working on for this
The fix was setting a couple of inline-blocks
.gallery-map {
height: 320px;
display: inline-block;
#media (min-width: 415px) {
height: 416px;
}
#media (min-width: 780px) {
height: 500px;
width: 64.5%;
}
}
Also to get that gallery to come along side I needed to add the inline-block specifically to the media query
.gallery {
height: 318px;
overflow-y: scroll;
overflow-x: hidden;
#media (min-width: 780px) {
width: 35%;
display: inline-block;
}
}
One of my questions about applying float to resizable images was answered by Gasim (thankyou) but I still have one more problem to fix.
I have two images which have this css code applied to them...
.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container {
max-width: 500px;
}
}
.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container2 {
max-width: 500px;
}
}
So now they're resizing correctly and aligned next to one another, I am unable to position them horizontally like my example below. I have tried the only way I know how to do this (margin-left: auto , margin-right:auto) but this didn't work. Also padding isn't working? Is there some part of this code which prevents these both from working and if so what do I need to fix it?
Any input if helpful thanks :)
Maybe this is not the best solution for responsive images, but I generally use media queries with a mobile first approach and it has been working out great. Basically, you set the boxes' widths to 100% by default and on larger screens you set the width that you want:
.image-container {
float: left;
width: 100%;
background-size: cover;
background-position: center center;
background-color: red; /* for testing */
height: 250px;
}
#media only screen and (min-width : 1224px) {
.image-container {
max-width: 500px;
}
}
Here is the result: http://codepen.io/gasim/pen/xbYQdd
Try to make the window size smaller and you will see the difference. It is much simpler to test, debug, and modify this code.
EDIT: Forgot to mention. If you can also use display: inline-block instead of floats.
EDIT 2: To add padding between containers you need to add margin to a specific value, not auto. For example:
.image-container {
/* rest of the values */
margin: 5px;
}
This will add 5px margin to left, right, top, and bottom of the image container. If you want to have center the image containers also, I would add them in another container:
<div class="container">
<div class="image-container" style="background-image: url(URL_HERE);"></div>
<div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>
and add the styles:
#media only screen and (min-width: 1224px) {
.container {
width: 80%;
margin: 0 auto;
}
}
Also, please check out the way I added the background images, using styles. It is much cleaner than writing CSS for each background image. That way you can have one class image-container and just add as many background-images without relying on CSS.
I have the following HTML table and associated CSS - http://jsfiddle.net/67LE7/
I believe this is the CSS that is causing the problem
.content {
position: relative;
max-width: 944px;
min-width: 200px;
margin: 0 auto;
display: flex;
justify-content: center;
}
When I expand the Result window horizontally, the first column expands infinitely and pushes the second and third columns to the next row. The intended result is for all three columns to maintain a fixed size and appear on the same row. What am I doing wrong?
you need to set a fixed width pricing table and remove the media queries. The media queries are resetting the widths. The media queries will make it look nice on phones and tablets, but if you do not need that...
updated fiddle
.pricing-table{
width: 150px;
/*#media (max-width: 768px) {
.pricing-table{
width: 48.9%;
}
}
#media (max-width: 480px) {
.pricing-table{
width: 100%;
margin: 0 0 10px;
}
}*/