this is a small project where I am trying to make a responsive web design. everything works until the screen resize and in some sizes some of the element move after the paragraph take more space but are not align with the rest of the element. this is the link in github: https://github.com/jesusjavierm1/Project_2_Responsive_Layout
thank you so much for any help
I just find out that the elements can be align vertically. So I solve the problem like that:
.container {
vertical-align: top;
}
this keep the elements in their place. no matter if I resize the page.
hope this help someone
Related
UI: Angular
I'm using the eLayoutType.application, but on the bigger screen there is always too much spacing on both sides of the page.
please see this pic for example
I guess it has something to do with the checkWindowWidth() of the LayoutService ?
How can I change it to utilize the full window width on the larger screen? (my app is supposed to be used on the larger screen/window only, so this spacing is nothing but wasting space for me.)
I wrote the following code in the styles.scss file under the src folder, it worked for me, I hope it will work for you
#media screen and (min-width: 2500px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 2000px;
}
}
You can play with pixels according to your own needs.
When I click the "Tabs" component, it shows it as the whole thing around the edges (except the top part that says "Interactive Stories").
I want to know how I'd make the MultiButton go just above the menu at the bottom of the "Tabs" component. So an area with a BorderLayout and when I set it's layout constraint to "South", I want is so that it's above the menu, not underneath it. Because if I previously tried to just do that, the menu part of "Tabs" would overlap it.
I've already watched the "HOW DO I - POSITIONING COMPONENTS USING LAYOUT MANAGERS" video and that didn't explain what I want; if it did, I didn't catch it.
Here's the github repo if that'd help at all: https://github.com/gogobebe2/InteractiveStories
If you need me to clarify things, since I admit it may not be good english, please tell me. I'm determined to fix this. Thanks heaps :)
Edit: Solved! Opened the theme.res file, went to the constants tab in the theme and removed the tabsOnTopBool constant boolean. Big thanks to https://stackoverflow.com/users/756809/shai-almog
The Tabs component has a special mode that is activated in the leather theme to allow the "arrow effect" to overlay on top of the UI. It then adds padding to the bottom of the content pane to allow you to scroll more within the tab.
It uses the theme constant tabsOnTopBool=true to do that and if this is the case it uses a special form of BorderLayout:
border.setCenterBehavior(BorderLayout.CENTER_BEHAVIOR_TOTAL_BELOW);
If you check out the docs for CENTER_BEHAVIOR_TOTAL_BELOW you will see:
The center component takes up the entire screens and the sides are
automatically placed on top of it thus creating a layered effect
This is somewhat undocumented so I'm adding the documentation of this to my task list...
You are on the right track with placing it at the South in the Tab. And infact that's the best way to do it.
You can give the Story Maker container a unique styling, let's say ContainerBottomMargin2 that has 2mm bottom margin or padding. This will push the container up a bit to avoid overlapping.
You can also style your TabsContainer to have 2mm top padding.
Because North, South, East and West, all have more priority over center, the Tab buttons will always cover components at the TabbedPane if possible. As the buttons are sitting in the South and you are adding your contents to the center.
I know very little about programming, but I'm excited about the prospect of Polymer making these advanced objects as simple as working in an HTML doc. Anyway, there's some basic stuff I can't figure out, like how to get a section to scroll to fit nested content, like a bunch of cards.
Here's an example
In a full, widescreen monitor, all 8 cards on the "100 years" tab are displayed fine. But as soon as you resize the window to something much narrower, like a smartphone screen, you realize you can't scroll, and thus can't access all of the content.
How do I enable scrolling for this?
The core-animated-pages element is overflow: hidden, and all the visible elements are children of that element.
If you set the core-animated-pages element to overflow: auto, then it will be scrollable.
Since it's a bit difficult to explain, I did a mockup to get across as much as possible visually:
http://sassmeister.com/gist/70624a740b1ca4ae7764
(If there's a better way to share a sass gist, let me know. First time using it)
Basically, this is the layout I want for a tablet in landscape mode. What I'm trying to do is make sure it fits perfectly on different tablets with different aspect ratios. Some things are fixed. The main content area is a 16x9 video, so that aspect is locked.
I have the header and footer (main column only) fixed right now as they need to be for portrait mode, but I could bring them into the regular flow if it's helpful for tablet landscape. Anyway, it's all basic responsive right now via susy2, and the sidebar is totally separate so it can scroll independent of the main content. What I would like is for the whole main area including header and footer to fit perfectly with even margins above and below vid, but then have the sidebar column change it's width to match the tablet.
So... if the tablet is wider, the teaser thumbnails go out to 16x9 ratio. If the tablet is narrower, the main column remains unchanged, but the teaser thumbs narrow down to squares.
If it's easier first to just figure out how to responsively shrink the right column only, so the aspect of thumbs is unchanged, that's ok. I just don't want the overall layout to get screwed up on one device vs another because of aspect ratio, so main focus is that the header hits top, footer hits bottom, main vid fits perfectly between them, then sidebar responds to fill in the rest (within reason).
thx for any input. First time making a website here, so lots to learn.
ps. I had vertical scroll enabled for the right column, but disabled it (by adding extra letter to to the scrolling class in scss column) since it's not actually letting me scroll. Not sure if that's because there's no actual content, or it doesn't recognize the empty padded cells as something worthy of scrolling.
You're biting off a lot for your first website, but Sassmeister is a great way to show what you are doing. I approve. :)
One of the problems you'll find is that CSS don't have the concept of aspect ratio built in, so the sort of layout you are attempting is non-trivial. CSS is best at handling widths, and letting everything overflow vertically. It takes some effort to make it handle height well.
If you can get away with it (depending on browser support), your best option is to use flexbox. Flexbox should make this much easier, but doesn't ave a lot of support yet. You could consider table-cells, which have more support, but can be harder to control.
In any case, you should ignore most of Susy for this — at least in laying out the large sections. If you want Susy to help you with grid calculations, ditch the mixins and just use the span() and gutter() functions to help you set widths. Something like this:
.flexbox {
flex: 1;
flex-basis: span(3);
}
.tables {
display: table-cell;
width: span(3);
}
// NOT THIS
.no {
#include span(3);
}
You can go back to using Susy mixins for simpler bits, like the items in the top navigation.
I'm working on a website that has quite a unique slideshow...
As you can see, the top of the image needs to curve in a weird way, and then blend in to the background. Currently, this is just set up as an overlayed <div> that lines up with the main background image, but because the site is responsive, things get funky at certain resolutions.
Is there any way to use CSS to accomplish this same effect? I've been experimenting with border-radius, but I'm not sure it's possible. I'd even be happy if it wasn't 100% cross browser, as it can degrade to just a straight edge.
Thanks.
I've done some work with SVGs as section separators.
The idea was to place a SVG above the section that it should "clip" and use negative margins (or the top property) to lower the separator onto the section. The section can have a bg image to achieve this effect.
In this demo, I was using 100% width separators: http://jsfiddle.net/fmpeyton/NuneR/
A word of caution: With 100% separators like in this demo, you might get some 'bleed' from the image underneath. It happened in FF when I was prototyping that JSfiddle. I wasn't really able to alleviate this without some hacky widths/margins.
Hope it points you in the right direction.
Edit:
To expand upon my answer, there are some other ways to clip/mask an element. Here are some resources I've been looking over when looking for a solution:
http://www.hongkiat.com/blog/css-masking/
http://www.html5rocks.com/en/tutorials/masking/adobe/
Most of the clipping/masking properties are not cross browser compatible, so use only in a case where you can fall back to a full, unmasked image.
You can use Properity for css 3 :
transform:rotate(10deg);
border-radius:7px;
box-shadow:4px 5px 6px #DDD;
It will create good attraction for images and visual contents. Best of Luck.