The problem could be simulated here:
https://demo-bi.abra.eu/app/show
There should be this:
But on iPhone, or iPad there is this, but only on first load:
On the second load all items are visible correctly, like in the first image.
Every item in list is affected by this CSS style:
#media (min-width: 26.25rem) {
.app-main-page-layout .igate-list-sorted .igate-list-pageslist-item {
max-width: none;
float: left;
width: 50%;
}}
I found out, that in case you delete the "#media" section, everything works fine and all items in list are visible:
.app-main-page-layout .igate-list-sorted .igate-list-pageslist-item {
max-width: none;
float: left;
width: 50%;
}
The interesting thing is that the style is applied with or without #media query. So it should have no impact on that, but it does.
It is happening on any iPhone, iPad in Safari or Chrome.
Thanks for any answer.
couldn't recreate in chrome 'toggle device' it seems suspicious that reloading fixes the problem, maybe it doesn't relate to CSS but to JS. I will suggest changing the float to flex or grid anyways.
Related
We have an element with a page-wrapper id. I have tested that changing the margin on this element does, in fact, remove the margin on the actual page:
#media (min-width: 768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 220px;
}
}
My goal is to keep the margin for the standard page, but remove it when printing, so I tried this:
#media print
{
#page-wrapper
{
margin: 0px !important;
/*display: none !important;*/
}
}
The display:none comment there is just to show that it does, in fact, hide that element for printing, it was there a part of my testing. However, the margin does not get changed like it should.
I am out of ideas on what I might be doing wrong, so I am hoping someone has an idea. We do NOT have any other #media print styles on the page, but do have other #media min-width styles, but as far as I know #page-wrapper should override them all for print.
Any ideas?
Edit: Setting background-color:red; doesn't seem to work as well, only hiding the element from view with display: none works.
Edit 2: I do set the #media print absolutely last in the stylesheet, not that it should matter since it's the only print style and uses !important, but still worth mentioning as one more thing to check off.
Edit 3: When inspecting the element, the only margin style applied is the style shown in the first code snippet. The #media printstyle does not show up at all when inspecting the element.
When I needed to tackle something similar, I created a PDF of the section of the page first and then I could print it if I wanted or I could email it instead. To adjust the margins for a PDF, you would use the #page selector. So, my embedded CSS would be:
#page{margin:120px 50px 80px 50px;}
It may or may not work as I haven't tried printing directly from the page, but that may offer another route to the same end goal.
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
I am not a web designer & I do not understand the CSS code very well.
what to edit in the famous mx-fluity blogger template to produce (multi-level) menu on both PC browser and mobile browser with the same style.
thanks in advance.
If I understand correctly, you don't want the menu to switch to a "mobile menu" (drop-down). Or do you want the navigation to be a full-width dropdown all the time?
If you want the navigation to remain as it is on the desktop as long as possible you need to look at the media queries.
Somewhere you'll find:
#media only screen and (max-width: 767px)
Look for the selectors called: #navinti and #mobilenav
You need to prevent #navinti from being hidden, and the same time disable #mobilenav
They currently look somewhat like:
#navinti {
float: none;
...
}
#mobilenav {
display: block;
...
}
Set it to:
#navinti {
float: left;
...
...
}
#mobilenav {
display: none; /* You might have to add an !important to this */
...
}
At #navinti erase:
background-color
-moz-box-shadow
-webkit-box-shadow
box-shadow
If your navigation isn't wider than the one on the template, you should get away with this down to 500px (width), from there you can hassle your way to say 460px width padding & margin... Unless your navigation has only 2 or 3 points there's not much of a chance you will get it squeezed onto a mobile screen.
i'm creating a responsive layout but i'm noticing a centering problem. I have three div (three boxes, each one next to the other) and i put them into a parent div to make the alignment. The strange thing is that on dreamweaver all works perfectly, but when i open the HTML file to test the page locally the centering is not correct. Here's the images so that you can understand better.
On Dreamweaver
click
When i open the HTML page locally
click
In the first screen as you can see, right and left spaces are perfectly equal, in the second screen left space is more narrow. I'd love to know why on dreamweaver is ok. Here's the code i used.
#infoInner {
margin-left: 0.5%;
margin-right: -0.5%;
}
.boxInfo {
padding: 2% 2%;
margin: 0 1.5%;
width: 26%;
border: 1px dashed white;
float: left;
}
Browsers by default tend to add styles to the document. This is why projects such as normalize.css exist to remove them, however, this is not the solution to your problem.
When a web browser displays code, it's the rendering engine that interprets the code to then lays it out to the screen. Chrome uses Blink, Safari uses Webkit, Internet Explorer uses Trident, and so on. After a bit of research, I see that Dreamweaver used the Presto rendering engine until version 3, and then moved to Webkit on version 4 / 5. I am not sure about the version DW6, I am also going to assume it is Webkit (EDIT WELCOMED). You should receive a similar result if you open your code up in Safari.
I recommend you open a new question with your code represented in a jsfiddle for members of SO to help you out and get it the way you want to look. However, from the description and the code posted it seems to be a rendering issue.
Further Reading:
http://en.wikipedia.org/wiki/Web_browser_engine
http://mashable.com/2014/02/26/browser-testing-tools/
https://www.youtube.com/watch?v=7bs9RGolIyI (More for the comedy)
Can you do that on this way:
<div class="wrapper">
<div class="item"></div>
<div class="item center"></div>
<div class="item"></div>
</div>
.wrapper {
text-align: center;
width: 100%;
}
.wrapper .item {
float: none;
display: inline;
width: 32%;
margin: 0px;
}
.wrapper .item.center{
margin-left: 1%;
margin-right: 1%;
}
I hope this help! :)
I have a gallery with a frame around the thumbnails, I have used max-width to shrink the thumbnail images so they all line up nicely, but in IE althought the image shrinks to the max width the frame still expands as if the image was larger. I have tried adding a max-width to the li but to no avail.
Here is a link to the page that looks nice and uniformed in Chrome and FF bt all over the shop in IE! http://wedding-photography-gloucestershire.co.uk/wedding-photography-gallery.php?gallery=Getting%20Ready
Wedding Photography Gallery
thanks in advance of any help.
This is the frame style..
.highslide-gallery ul li {
display: block;
position: relative;
float: left;
width: 106px;
height: 106px;
border: 1px solid silver;
margin: 2px;
line-height: 0;
overflow: hidden;
background-color: #000;
max-width: 106px;
}
I tried adding this which I found on another website as a solution to IE max width problems, but i don't really understand it ;
width:expression(document.body.clientWidth > 106? "106px": "auto" );
but it still didn't work.
Thank you.
IE treats padding/margin differently than the other browsers. I looked at your stylesheet (highside) and you need to have a stylesheet for ie specifically and then you can target IE specifically without worrying about how the changes you make effect the other browsers. I personally wouldn't do that but I used to do it when I was experimenting in web development.
The easiest way for you to figure out what's going wrong and where it is going wrong is to use firebug. Safari and IE have similar debug environments as well. There are some really good tutorials on using firebug out on http://net.tutsplus.com
Good luck.