I am using fixed layouts however when I see my layout in
android tablets and phones the layout is breaking for some
reason.
Please visit http://www.iamvishal.com/pureecn/
and notice the top navigation "open account, customer support and select language"
In the desktop it looks fine however the top navigation breaks in mobile browsers.
I am suspecting its the margin them.
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 65px;
position: relative;
}
Pretty much things are breaking because you have half of your layout "fixed" and the other half "fluid".
For example:
div.section {
margin-left: auto;
margin-right: auto;
width: 960px; /*fixed*/
position: relative;
}
#main_links_container {
float: left;
width: 80%; /*fluid*/
}
Also note that when no width is set for an element, the default is auto.
Open your site on a desktop and try resizing the browser window you will probably see the same issue that you're seeing on mobiles and tablets.
If you really want to avoid media selectors you could try changing this-
html, body, #page {
height: 100%;
}
To something like this-
html, body, #page {
width: 1200px;
margin: 0 auto;
}
Use a media query in your CSS for greater control on mobile devices-
#media screen and (max-width: 767px) {
#main_links_list_1,#main_links_list_2,#main_links_list_3
{
margin-right: 15px; // reduced amount for mobile devices and tablets
position: relative;
}
}
Ensure this is BELOW the current CSS otherwise it will get overridden
There are a lot of reasons your site could be off in mobile/tablet.
1 ==> Create a fluid layout for non-desktop
2 ==> Make sure your meta viewport is correct (include retina display and Android dpi)
3 ==> Optimixe your images for mobile
4 ==> beware of position:fixed on older iOs and Android devices. Does not work as expected.
Can you explain a little better what is breaking?
You assumed wrong. YOu need responsive layout and not fixed!
I suggest you take a look at zurb foundation v4.
Your problem may be cause in the section Professional Solutions the last link is quite long, which breaks the layouts.
Try this in your css file:
#professional_solutions_list {
max-width: 180px;
width: 100%;
}
see the following screen to get what I meant (the red line is where your menu should reach, the blue line is where it is actually):
Update
The following state is the default one, with the problem as occurred in tablets, please notice the applied rules:
And this one after adding max-width: 180px, the problem is solved:
I edit the css rules live, using FireBug
EDIT:
Upon your comment, I've checked the website again, please remove:
width: 94%;
from the div with the id: secondary_links
Although a responsive layout like zurb would be advisable - the quick fix lies in applying a
min-width: to your page-wrapper element
Related
So I have two tabs, I used mui tabs for that. For the first tab I display the ingredients, in the second tab I add new ingredients with different forms. I have different fields for each form so whenever I click on one form to open ( I use a mui split button to select and open different forms) , forms open with its width ( sometimes it jumps to center with smaller width, sometimes covers the whole tab). It looks bad. I want to make it a fixed size like 500px then everything looks good. But then for mobile usage or in different small-size components (I want to reuse the who tabs component), 500px doesn't look okay. I need to scroll to see whole form. I tried 100% or fit-content didn't work. My CSS looks like this now.
#formContainer {
width: 500px;
height:480px;
margin-top: 20px;
}
#media only screen and (max-width: 800px) {
#formContainer {
max-width:fit-content;
height:fit-content;
}
}
I am not good at CSS so maybe I am missing something basic? I try to look for it but I don't even know how to search about my problem. What would you suggest? Thanks
It's a little difficult to know exactly what you are going for. What I did on one of my angular projects is using a fixed position with a percent value
#formContainer {
position: fixed;
width: 500px;
height:480px;
margin-top: 20px;
}
you also may want to change it to be a class and not an ID since it will be re-used in more than just a single element.
Secondly, you can keep your current values, but also use max
#formContainer {
width: 500px;
max-width: 50%;
height: 480px;
min-height: 50%;
margin-top: 20px;
}
For some reason min-height seems to do the same as max-width.
I'm not a CSS expert so hopefully you can get a more precise answer on the hows and whys. I am simply a fellow sojourner suffering in the world of CSS.
I am working on a small Web-App. I want to make it responsive for smaller devices. Problem is, on mobile, the sidebar is not scrollable to see the last item on bottom, and i don't know how to make it look good on mobile screen.
Solution would be something like:
#media (max-width: 500px) {
#sidebar {
height: 100vh;
}
}
but this isn't working and idk why. any ideas?
The elements of you nav bar have heights, padding, border, margin.. in px or em.
They add up and overflow your height: 100vh.
The easiest solution is like Bob Farias suggested to add overflow-y: auto or overflow-y: scroll to
#sidebar {
height: 100vh;
}
There are more laborious way to avoid scrolling and overflowing whom would be for example setting your elements "heights" to be fractions of 100vh, or redesigning your nav bar.
You can try this inside your "nav" tag
height: 100%;
overflow: scroll;
It's because you working with pixels. It's better for responsive sites to work with a percentage number. Also, try to search for "overflow" propriety
The problem is that on mobile browsers such as Safari or Chrome, the browser's toolbar isn't taken into consideration. You can check out a more detail answer here.
A solution to this problem can be found here.
I am trying to get a horizontal menu to be fixed in its current position so it doesn't move when you scroll in both regular view and also responsive view.
I tried researching how to do it but couldnt seem to have luck in making it work.
This is on a Wordpress site,
This Wordpress Site
There are a few styles with !important that are holding you back. Namely position: relative !important; and width: auto !important;
Try adding (or separating out) these styles to this class:
.responsive nav.art-nav, .responsive .art-nav-inner {
position: fixed;
width: 100%;
}
Ideally just on the nav not .art-nav-inner i don't know what that is affecting
Go into your 'style.css' sheet (there are several ways to get to it) and add this to the bottom:
.art-nav, .responsive nav.art-nav, .responsive .art-nav-inner {
position: fixed;
width: 100%;
}
Few things this does:
1. Fixes your menu in place on scroll.
2. Extends your menu to full width of the screen (just looks a little better.)
3. Does this all screen sizes (desktop, tablet, and mobile.)
Hope that works for you.
We use a custom template page in wordpress for a narrow width page. My goal is for it to appear as 600px wide + padding of 50px on each side (or so).
This is an example of a page that works on both desktop and mobile:
[edit: removed link]
This is the page with an issue: [edit: removed link] -- it looks correct on desktop, but on mobile isn't scaling down the width. I've tried removing what I thought were likely culprits: the youtube video, reuploading all images w/ 600px width (instead of wordpress resizing), and still having trouble.
Thank you.
Start with this:
Line 6 of main-41ab33da.css
Change "inline-block" to "block", like here
.page-template-template-narrow .narrow-landing-page {
background-color: #fff;
display: block;
padding: 0 25px;
}
Next, add "max-width" to form (see code) and yellow block (inline styles, as you don't have any selector for it)
#lead-capture {
max-width: 100%;
}
Finally do same for youtube iframe you have and you're good
iframe {
max-width: 100%;
}
No matter what screen size I use, the Sidenav is always the same size. I tried adding attributes such as
- flex
- flex="85" (to get 85% of its container)
Can't seem to find a good approach.
In angular material, md-sidenav has these attributes:
width: 304px;
min-width: 304px;
That's why the width will be fixed at 304 px no matter what device you use.
So if you want to change your sidenav width you'll have to change the css a bit.
If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 200px !important;
width: 85vw !important;
max-width: 400px !important;
}
Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.
md-sidenav.md-locked-open {
width: 250px;
min-width: 250px;
max-width: 250px;
}
I'm not sure if that is the proper way but it seemed to work for me.
Thanks to user3587412 I could find easily the required styles.
To get the md-sidenav to adjust to a flex parent just override
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 0px !important;
width: auto !important;
max-width: none !important;
}
After trying different CSS in this thread I end up with :
md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
width: 200px;
min-width: 200px;
max-width: 200px;
}
I'm currently on angular-material 1.0.8 and tested with Chrome 50 only.
With this CSS what works for me :
Animation close and open OK
When locked OK
When not locked OK
In case anyone comes here using the latest mat-sidenav, you can explicitly set the width on the the element.
mat-sidenav {
width: 200px;
}
The docs caution against using percentage based sizes.
https://material.angular.io/components/sidenav/overview#setting-the-sidenavs-size
Here's a somewhat "jank" solution, but it doesn't mess with the animations at all. The sidenav automatically resizes itself in order of the items inside it to fit perfectly. As such, you can just add a span with the width of your choice to the mat-drawer to set a minimum size. Note that this only works to set a minimum width, and not a maximum width.
<span style="height: 0px; width: 200px; display: inline-block;"></span>
I came across this issue, as well -- even though the 304px width is plenty, I had a card in the content area to the right that was squeezing the sidenav. So, using the flex grid I was able to add <md-sidenav flex="15" class="md-sidenav-left ... to get the width I wanted without overriding CSS. It sounds like this didn't work for you, so maybe it has to do with the layout options in your design...