Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I'm trying to build my own photo gallery site, and I just need some quick solution to my problem.
Overview: A photo gallery website with problems on displaying in different screen resolution.
Problem: If the screen resolution of the viewer is greater than of 13" screen, the navigation or menu is at the left side. And when viewed in a smaller screen size such as tablets and phones, the navigation is at the top and only shows a scrolling page with a single image at view at its screen display at a time. You can see the difference when you zoom in and out of the my site indicated above.
What must be done to fix the display to the one with navigation on the left even when viewed with phones and tablets?
So you want a non-responsive site???? Okay, I'll avoid making comments about why you should leave the responsive behavior, but maybe you have the only site on the planet that no one ever visits on a mobile device. Here's how you do it...
In your main.css file there is a media query for the header elements that starts somewhere around line 119:
#media (min-width:1000px) {
Remove this line and it's closing } somewhere around line 245.
Then delete the entire media query and it's contents beginning at line 539 and ending around 602:
/
* Responsive code */
#media (max-width:1100px){
header{
...
#map{
margin: 0!important;
}
}
If you also want the portfolio images to not scale remove the last media query and it's contents:
#media (max-width:550px){
.main .work{
width: 100%;
}
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am currently redoing my css and other stuff thats needed to make my adaptive site to a responsive - until now I designed my site for my laptop and then scaled down and now Im doing from the other side.
I have managed to get the site look ok in 319x480 and now Im gonna see where to make my first breakpoint: exactly how do you go about this? Should I only resize window horizontally and see where a break is needed or should I also do it vertically? From the tutorials Ive seen they always just talking about horizontally, but arent you missing some stuff then?
Also, now it looks good in portrait mode. Lets say I will make a breakpoint at 600px width for portrait and one at 1000px and thats it. Should I then after go back to 319x480 and flip to landscape and expand the site once again and find new breakpoints for landscape mode too?
How are you going about this in a methodical way? I think this is a really cool way to design and I really wanna learn how to do it right.
Thanks!
You want to use min-width media queries if you are doing mobile first. Desktop first uses max-width. Concentrate on width rather than vertical height like you were asking, if the browser window height is resized it is usually fine with the scrollbar. You don't want people to have to scroll horizontally usually.
Example:
.header-title {
font-size: 14px;
}
#media screen and (min-width: 600px) {
.header-title {
font-size: 16px;
}
}
#media screen and (min-width: 1024px) {
.header-title {
font-size: 18px;
}
}
All the main breakpoints you can check in browser console. Here you can see, that as a rule, only width changes. Probably, vertical resize won't influence your page that much
In general CSS break points are horizontally because responsive have a "flow" layout. For example, if you have a grid layout with 3 photos side by side and your browser gets too narrow display all of them, the should get stacked on top of one another so the view can scroll through them.
It's always a good idea to test your site at multiple sizes and aspect ratios, especially if you are using fixed/absolute position or calculating heights.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm making an online portfolio, and my menu, which consists of 3 flip card images, needs to be able to work on touch screen devices. Since I don't want to change anything about the desktop menu, I was thinking of creating a completely new menu for mobile devices, which would mean discarding a section of my html code and inserting a new section.
I'm not sure how best to do this - for example, is it possible to create different index pages for different device sizes? Every time I try and search the answer to this I only find results about css media queries, which I'm using as well, but in this case it's the content I want to change. Any suggestions? Many thanks!
Erin.
Use bootstrap. Its a little bit of effort to learn this but it will be a asset for the lifetime. You will get lot of construct in it to make any webpage work on all the screens simultaneously.
Edit:
If you dont want to use bootstrap use the following media queries
#media screen and (max-width: 480px) {
.in-small-devices {
display: block;
}
.in-large-devices{
display: none
}
}
#media screen and (min-width: 480px) {
.in-small-devices {
display: none;
}
.in-large-devices{
display: block
}
}
Then apply it to the two divs that you want to show alternatively
<div class="in-small-devices"></div>
<div class="in-large-devices"></div>
With Bootstrap Grid classes you can define the width of a div on different screen (xs, sm, ...) sizes. For example you can hide whole codeblocks and display other html when on specific screen sizes.
<div class="visible-lg"></div> (visible on large screens)
<div class="hidden-xs"></div> (hidden on extra-small screens)
<div class="col-sm-6 col-lg-3"></div>
(at default 12 units are one row. This div will take 6 units space on small screens, but only 3 on large screens. This means 2 divs fit in row on small screens, but 4 divs on large screens)
take a closer look:
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
http://getbootstrap.com/css/#grid
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have created my first website for an oil change business. 1stopexpresslube.com On the front page I have a banner in blue with the business name, hours of operation, phone and address. I removed the banner on all the subsequent pages, because when viewing on a mobile device you couldn't tell that you had switched pages because all you could see was the banner and the menu buttons on the mobile page which do not change. A quick solution I came up with was leaving banner on the initial index.html page, and then all other pages I removed the banner. I then got the idea to see if I could change my site, so that on the 2nd, 3rd, 4th etc pages I could have the banner that is in blue ONLY appear on larger devices. So on phones the banner would not be there, as it is right now, but when I view on a desktop, those 2nd, 3rd, 4th pages etc all show a banner. I tried the opacity element so it would show 0, but it just made the banner disappear but still take space. I would like the space to collapse. I also tried visibility: collapse; and hidden; and they both seemed to do the same as opacity: 0; Is there a way to make the banner remove itself from the document flow on mobile devices, and then reappear and take up space on larger screens?
As mentioned, you can use media queries in your CSS, which allows you set different styles for different size screens.
/* Large desktop */
#media (min-width: 1200px) {
.banner{ width:123px; display:block; }
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
.banner{ display:none; }
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
When viewing http://rayku.com on a mobile device (anything with iPhone 5 resolution or smaller), there is a horizontal scroll bar - how can I maximize the content width so that there is no horizontal scroll bar? http://d.pr/i/epmI
There is no min-width anywhere in the css.
The scroll is due to the left margin of the button inside the video container .myVideoCont.
If you need to center align the button over the video, then use
left:50%; transform: translateX(-50%);. and avoid left margin.
Use this CSS to target screens below a tablet size, decrease the max-device-width pixels to only target smaller devices:
#media only screen and (max-device-width: 1024px) {
#mainContainer {
max-width: 90%; //also try "width: 90%"
}
}
If this doesn't work try setting the width to 80% and keep decreasing until it fits.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am creating a webpage in which there is an image on the extreme left when the browser is maximized but as soon as the browser gets minimized i want the image to move to extreme right .. How to do that ? I tried float but it's not working..
Do you mean minimized to task bar or resize window? because when you minimize to task bar the image don't visible anymore or i miss something? anyway if you mean resize so:
Use Media Queries:
img{
float:right;
}
#media (min-width: 800px) {
img{
float:left;
}
}
This cause to image float:right until window's width is under 800px and if the browser's width resize to larger than 800px, the image change to float:left