I am using a modified version of the Quintus Theme in a self-hosted WordPress site. The site appears and works great on all browsers that I have tested, a windows tablet, and a windows phone. When I view the site on an iPad running the latest iOS version, the site is being squished to what I would assume is between 700-800px wide... all except for my custom header and slider. The blog title, menu and everything contained within the #page is not showing full width. I have beat my head against a wall trying to locate this needle in the haystack to find what could be causing this to display short of the width. I even tried some iPad emulators, however all those display the site perfectly. The actual iPad is not. I am not sure how to inspect the elements on an iPad since there are not any options on an iPad broswer to do so. Can someone please help me?
Blog... http://blog.modafabrics.com
Using the chrome emulator, i can't see any responsive CSS being used.
Your big slider area in the middle is set to a width of 1000px, whereas a iPad's resolution is only around 1024 x 768px. When in portrait you will be missing almost a quarter of the screen size.
The best way around it would be to start using percentages once you hit 1024px and to start making it responsive so it works on all devices, mobiles included.
Have a read on the MDN about media queries which are what are used in responsive CSS.
Link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
Ill see if i can get you started on making things a bit better.
These are all changes needed within your css which need to be applied within the media query for tablets
#page {
overflow-x: hidden; // stops the page being slid to right
}
#primary {
float: none; // removes the float style from the element (things can go above/under it otherwise)
}
#content {
margin: 0; // makes it full width
}
You will then need to decide what your going to do with the sidebar e.g. hide it or drop it below the content.
That should get you started on it. The best way to continue would be to use the chrome inspect element tool, you can then dig into each layer of the template and see why different things aren't re-sizing.
Related
I built website on divi for a while now. I tried many times to change Divi built in responsive settings.
Most of my bugs are on effects, like moving up and down according to screensize; when it work out on a 13 inch it's totally messed up on a 27 inch
But my main problem is that the phone version goes from 320px up to 768px which is not adapted for little tablets.
I'ld like to change that built in breakpoint settings to something like 500px max for mobile version and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
Do you have any idea ?
If there is no solution through divi builder, is there any chance to do something through CSS ?
I've tried to reach Divi's expert on Malt but they were not able to answered me.
I've tried some CSS but it didn't work out. I know that it is possible to customise some sections, row, column to a specific screen size and sometimes I managed to do what I want sometimes thanks to that.
I also tried to look at the .php files but I've to say : I'm not an expert... and didn't find anything.
I was expecting to be able to customise divi's breakpoint with my own value.
To do something like that : I'ld like to change built in breakpoint setting to something like 500px max and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
I've been having the same problem for years now. Divi doesn't really seem to care at all about the fact that responsiveness has become a lot more complicated than just two breakpoints. I haven't found any helpful plugin or extension that's free.
You might want to look at this one: https://www.peeayecreative.com/product/divi-responsive-helper/ I haven't bought it myself but it seems to have everything I want to customize the breakpoints.
But still today I just use CSS in the Theme Options of Divi to create my own breakpoints.
For example, the menu changes to a hamburger at 980PX but this screws it all up 'till you get to about 1200px. So in the CSS is use this:
#media(max-width:1200px){
.et_pb_menu__menu {
display: none !important;
}
.et_mobile_nav_menu {
display: block !important;
}
}
Also, Divi tends to hide empty columns, even if the heave a background and a set height. So I always give those columns a class of divi-hidden-100pr or divi-hidden-50vh depending if you can set the height on percentage or if need need to set the height yourself. Then in Theme Options this is my CSS:
#media(max-width:1200px){
.divi-hidden-100pr,
.divi-hidden-50vh {
display:block !important;
}
.divi-hidden-100pr {
height:100% !important;
}
.divi-hidden-50vh {
height:50vh !important;
}
}
In this case the heigt is 50vh or 100% you can set the 50vh to whatever you prefer.
Maybe the reason why your CSS didn't work is because you did use !important
I know that it's a CSS crime to use this, but Divi doesn't seem to care and uses this a lot. So if you don't use it, your CSS probably won't work.
Problem however with this custom CSS, you'll still get you're margins, paddings, font-size etc set for the desktop. So pretty soon you custom CSS in Theme Options wil grow bigger and bigger and you'll have to change some desktop design settings to make your responsive custom CSS work
For example:
If you want a different font-color on a device you should set the font color for desktop in the custom CSS part of the module, not in de Design tab. If you set it in the Design tab it will bet set with !important and no matter where you put you're custom responsive CSS, it wil always be overruled by the Divi settings.
hope this helpen you a bit. Hope Divi will realize soon that there's more than 5 devices out there with different sizes.
I've made a responsive web page that looks really great when resizing the window manually but doesn't look so great when using the responsive tool embedded in chrome. So I decided to design according to what it looks like on Google Chrome responsive tool, but now it looks awful when I resize the window manually.
Which one should I trust ?! How do I know what It will look like on mobile?
Edit: Also, I have this basic rule
#media only screen and (min-device-width: 900px) {
body {
width: 60%;
margin: 0 auto;
}
}
The body width will correctly resize while using chrome responsive tool, but will not when resizing chrome window. If I change it for min-width : 900px, the body will correctly resize while resizing chrome window but not with chrome responsive tool!
On the left this is the responsive inspector tool provided by Chrome, on the right this is the chrome windows being resized ( both are the same width ) while using #media only screen and (min-device-width: 900px)
The media query doesn't work here ( on the inspector ) but does work while resizing the windows
Same thing here but using #media only screen and (min-width: 900px) . The inspector tool displays the page Ok, but whenever I resize the Chrome window the query doesn't get triggered!
I know I am late to answer but hopefully this can help others having a similar problem. I am mainly going to respond to your first bit:
I've made a responsive web page that looks really great when resizing the window manually but doesn't look so great when using the responsive tool embedded in chrome. So I decided to design according to what it looks like on Google Chrome responsive tool, but now it looks awful when I resize the window manually.
Which one should I trust ?! How do I know what It will look like on mobile?
Like Relisora said, definitely trust the responsive tool over the manual window resize!
But it's still frustrating that manual resize is different than the developer tools.
To make sure the page looks the same/ similar on both the responsive tool and manual resizing, try using the viewport meta tag!
put something like this in your html head:
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
further explanation from Mozilla
I accord a lot of importance to the chrome responsive tool in the development tools.
However sometimes neither of resizing or the responsive tool are working (while using it on responsive settings).
The only tool that never failed me is when you emulate the device into your responsive tool :
Access it by : F12 -> Settings -> Devices
The list is quite complete but it's not a general case where you can test everything. It still should be enough for the majority of devices.
Edit :
If the device you want to test is not in the list, you can add it by clicking "Add custom device" and make sure you complete all the elements :
EDIT2 :
The inspector is working while simply resizing is not because there is a variable you don't take into account while using simple resizing : the resolution.
This variable is known by the inspector when you select a device and this is why the rendering will be the exact same as if you used an actual device.
The inspector will display what will be rendered on mobile.
I've been developing a website on my local machine that has a fixed nav menu at the top. When a browser zooms in, I use media queries to compress the space between objects in the header so all objects fit on screen, and this works well on desktop.
However, I've noticed when testing on a mobile device (Android Galaxy S3) that these media queries are not triggered on pinch zoom, resulting in the icons expanding past the limits of the mobile viewport.
I can't find good documentation of this behavior online. I've seen it mentioned sporadically that this is designed behavior, and pinch zoom is like a 'magnifying glass' that should not activate media queries. I'm considering disabling the nav menu on mobile entirely. Is there a native way to deal with this problem, or will this require a javascript solution?
Here are two pictures. The first is the nav menu at no zoom, the second is the nav menu pinch zoomed on a mobile device.
Below are the two media queries I'm currently using. Note that I am using the meta viewport tag to set the content width as well; I can't think of anything else that might influence this behavior.
#media screen and (max-width: 74em){...}
#media screen and (max-width: 47em){...}
I have tried px measurements as well.
Let me know if any more information is required. Thank you for your help.
I was oscillating between fixing the viewport to the device width and fixing it to an absolute width, as well as testing between browsers. Setting the meta viewport tag to device-width works on some browsers, but not all, and it appears mobile has historically poor support for fixed headers. I ultimately opted to simply disable the header on certain devices; I think any other solution would demand using javascript and probably yield a pretty poor performance on mobile devices.
As well, setting the viewport to device-width may compress the body of an HTML page set to 100% height to less than the device height, which is a problem if you're working with a footer. I ultimately solved this by padding out the body with extra space depending on the aspect ratio.
After dealing with this problem I'd recommend avoiding fixed items on mobile devices, unless you specifically target a userAgent. In general mobile devices are too dynamic in size, and using fixed headers seem to be a bit more trouble then they're worth.
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
I'm using HTML5 full screen mode on browsers that support it (can't share link to code yet, it's not live). I've run into a problem that I think maybe an Safari bug, but I wanted to also post here to see if anyone had suggestions on a workaround.
My app is using an image slider that has a div with links above it for hover effects (tough to explain, but bear with me). The default width of both the images and the hover DIV are 1150 pixels (via CSS), and using a media query to specific the links div width (this is SCSS code, so it may look funny to those not used to it).
.links {
width: 1150px;
height: 744px;
position: absolute;
z-index: 101;
#media (max-width: 1200px) {
width: 910px;
height: 588.77px;
}
}
I also provide a way to go to full screen (via HTML5 full screen) and that specifies a custom width / height for this div (because screen sizes will vary, and my links have to hover at certain positions, using percentages). All of this is working fine. Drag the browser around between under and over 1200px wide and the hover states scales properly with the image. Go to full screen, everything scales appropriately on the image and the hovers. However if I start in a browser that is
1) sized below 1200 pixels
2) go to full screen
3) then exit full screen mode in safari only it doesn't scale based on the media query and leaves the .links class sized at 1150 pixels wide.
If I resize anything, it goes back to working / scaling properly.
I can't think of a way to trigger the CSS media query outside of a resize event. I don't want to add a separate class via jQuery on my exit of fullscreen because I'd have to remove it on subsequent resizing.
Any other suggestions for a workaround?
Ok, so I did a mockup outside of my app with the same conditions (with none of the other code) and realized this was working in Safari in that test. I was using:
$(document).stop(true, true);
in an event bound to exiting full screen. Apparently Safari didn't like this. Now that that is removed, it works fine in Safari again.