I have this layout:
for a desktop/landscape site. And I want it to scale well on a mobile device BUT at the same time I don't want the site to look like crap so I want to change the content slightly so it more closely fits in with the size of a mobile device/smartphone sized screen.
So I came up with this:
In the landscape picture, the 5 boxes in the middle are divs, and each div contains a Picture and a Title (that links to another page). These 5 boxes are the main navigation.
In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.
We can't use JavaScript for this site, so I am wondering how I would make such dramatic changes to this layout using media queries.
I know I can just include the massiv pic even on the landscape view but only choose to display it on the mobile version, but I don't want to download unnecessarily.
Is there a way to solve this?
Ok, this should give you the idea:
<div id="massive-pic"></div>
#media all and (min-width: 601px) {
#massive-pic {
display:none;
}
}
#media all and (max-width: 600px) {
#massive-pic {
background-image:url('images/massive-pic-mobile.png');
width:100%;
height:600px;
}
}
You can't insert the images in the HTML directly, otherwise the image will be downloaded allways! Even if you set it to display:none.
So you need to insert the images with css as a background image.
In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.
That's not possible with server side scripting alone, because info like device width won't get send to the server.
However you can try to detect mobile and other devices accessing the user-agent and other header information.
If you use PHP, you could use something like that:
https://github.com/serbanghita/Mobile-Detect/
Related
I have a slider that shows the copy I've written along with a button which I would like to show up on the mobile version of the site. For some reason, the slider content does not adapt to the screen when I look at it on my phone.
The website is the following: www.luckywebsites.ca
Any tips on how to resize the slider for Mobile? If not, how can I make a separate site for the mobile only?
The issue is with the size of the text font, check the font size and decrease it in mobile. Please check the screenshot taken after changing the font size. Modifying the code in main.min.css may do the work.
#media (max-width: 767px)
.btx-layout-responsive .font-style-big {
font-size: 28px!important;
}
I'm trying to make a website for my friend's company and I did but it only looks good on desktop computers. On the phones and tablets looks really bad. I was doing so much research but couldn't find how to use fluid layouts or any other way. On some phones, divs just position in weird places and on some other phones they just look very small or cover the whole screen. And I have a white space on the bottom of the page(on phones). Here is a link so you can take a look: http://agrofit.hr/ p.s. it is on Croatian but you don't need to read :-))). Please help as soon as you can. Thanks!!!!
Try using percentage measurements instead of pixel measurement's.
For example:
.example {width: 100%}
rather than:
.example {width: 700px}
Also as mentioned above use some CSS Media Queries.
So for example:
#media screen and (max-width: 700px) {
img {width: 200px}
}
This says that whenever someone is viewing on a device with a screen smaller than 700px, the image will be 200px.
Hope this helps.
[Edit] To Test Your Site On Mobile -
1) Open the webpage you want to test in Chrome.
2) Right click and click 'Inspect'
3) Then a grey window should appear either at the bottom of your browser or the right hand side of your browser.
4) At the top left corner of the new grey window there will be a two buttons, click the one that says "toggle device toolbar"
You can now select different devices and see how they appear in each.
You should read on css media queries and responsive layouts. You could also check out responsive frame works like bootstrap
div {
font-size: calc((.05em + 2vmin) + (.05em + 2vmax));
line-height: 115%;
}
That seems to work.
I tested on Chrome with Inspect's device profiles.
My site(www.acweb.com.cy) is having a problem showing the navbar on the top right of the screen. When its resized on at the width of 768px its displaying both the "js-fh5co-nav-toggle fh5co-nav-toggle" and the regular navigation bar which is the horizontal for the bigger screens. So when its open on my small ipad is showing both the navbars.
Second off all i dont know much of sass and am using the koala program to edit the templates scss files. Additionally i removed all _(underscore) from the scss filenames cause koala wouldnt read the files. At last when am loading the site and opening the developer inspector within firefox the navbar is read as _navbar.scss instead of navbar.scss as i renamed it.
Thanks for the help!!
Your responsive media query codes are colliding at some places, you need to correct that. That's the reason both navbar are visible from 768px to 765px.
This is what your max-width and min-width are at present as below,
#media screen and (min-width: 768px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
You need to either increase or decrease any one of there width. You can make changes as below,
#media screen and (min-width: 769px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
So when its open on my small ipad is showing both the navbars.
iPads have a different pixel density than your normal computer monitor, this may be confusing when using css media queries and might even fool your css into thinking it's in a totally different media query.
I suggest checking out this site to get an idea of why your iPad is showing such a different website than your desktop/laptop:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
For more information about pixel density and specifically Apple's Retina display, this is where you need to be: https://en.wikipedia.org/wiki/Retina_Display
Quick workaround (not the best possible solution)
At the bottom of your main.js file, add this line after all the other methods:
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
So that your function will be:
// Document on load.
$(function(){
parallax();
burgerMenu();
clickMenu();
windowScroll();
navigationSection();
goToTop();
// Animations
homeAnimate();
introAnimate();
workAnimate();
testimonialAnimate();
servicesAnimate();
aboutAnimate();
countersAnimate();
contactAnimate();
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
});
This will remove the general class when both of them are used for the navigation.
I was searching about how to make your webpage fits any screen resolution and I found that most answers prefer using % over Pixels. I found that this is correct when I viewed the code of this website http://zcsfestival.com/
you can find objects overlap in mobile resolution or when you don't maximize the window of your browser. However, when I read the code of this site http://m3adikawmia.eb2a.com/?ckattempt=1
I found that it uses Pixels and it fits any screen resolution also when I restore the browser window down. It seems perfect. I became confused about that and I want any clarification about this point.
Thanks in advnace,
One way is to define elements with % . But some times the elements will be to small in mobile resolution that it is necessary to define different CSS codes for different resolutions. Like this:
normal situation:
.container {width: 1000px;}
responsive:
#media only screen and (max-width:800px) {
/* redefining some element sizes like the example: */
.container {width:100%;}
}
And this way will continue till mobile resolution.
I am creating a webpage that is size-specific rather than pixel-specific (i.e. width in centimetres or inches not pixels)
When testing on different mobile phones I've noticed that sometimes the resolution of the device can be extremely high making the objects on the screen very small compared at what I want the user to view them at.
I'm using queries such as this:
#media screen and (min-width: 0px) and (max-width: 400px){
/*2 rows*/
.a1x1, .a1x2{
width:50%;
}
.a3x3, .a3x2{
width:100%;
}
.a2x3, .a2x1, .a2x2{
width:100%
}
}
...etc
I know that a list of queries I can use are here at w3schools but I'm not sure what one I would use or how to implement it.
Any help is appreciated! (Please put examples if you can :D)
EDIT:
Sorry for not being completely specific with the question, let me provide a complete description of what I'm trying to achieve.
I have a page that will display media (mostly images) within a grid-based page. When the page is desktop size it will display 5 columns wide. When it is tablet size I would like to display 4 columns.
Depending on the size of the mobile device (small/phone) I would like the media to be displayed in 2 or 3 columns. The problem is: on devices such as the Samsung galaxy S IV that have very large resolutions/PPI: they display all 5 columns making the media seem small - removing the full screen effect I'm trying to achieve.
So question is this:
How would I detect small device screens and appropriate this into my
css coding?
So far this blog post has been the most helpful.
So I finally had time to look over the links posted as answers. (yay!) It seems that if the device has the resolution to display the entire website it will.
I fixed it by adding this little beauty:
<meta name="viewport" content="width=device-width, initial-scale=1">
This forces the device to display 1 for 1 without any zoom. Though I believe this may act differently or not be supported on other mobile devices.