I have 800 pixel width content area where I need to put 3 rectangles with equal gap of 10px between each rectangles. How can it possible. Followings are the explanation.
I created a rectangle and used "Ctrl+R" to repeat it
I need to keep fixed gap of 10px between the rectangles and need to equally distributed the rectangles with in 800px of width
Presently I do some math to do this using calculator and then doing the design. Is there any solution to do this without doing an extra calculation. Hopes a solution from somebody. I tried it using adjusting the space and adjusting the width of rectangle. But it is not accurately giving the result and also does'nt meet my requirement. I am looking for a native Adobe XD solution for this. Thanks in advance!
Related
I'm using a 3x3 image grid with Lightbox (in MDBootstrap).
The images all have a 33% width (including padding).
All images are retrieved from the Instagram Basic Display API.
These images usually have a native resolution of 1440x1440px.
However, sometimes, for some odd reason, an image will have a resolution of 1440x1441 (one pixel wider).
Putting these images that are one pixel higher in a grid, scaling them down to 33% width, will cause them to be slightly larger, which thereby causes 3 images to no longer fit on one row. Please see example below:
As you can see, the images aren't aligned in a 3x3 grid. I found out that this is caused by the second image in the top row, which is actually 156 in width by 156.094px in height(!). This is obviously caused by the image provided by Instagram being 1440x1441 (in stead of 1440x1440):
I have tried using display: inline-table on the image object as someone in another topic suggested (to round down decimal pixels), but this didn't work. Manually resizing the image to 155.891px x 156px (using Inspect Element in Chrome) makes the image fit:
So my question is: without having to check every image's width with javascript and resizing all of them to the same height, how can I make sure the image has an exact 1:1 aspect ratio as opposed to ~1:1.001 to prevent this from happening?
Any help would be greatly appreciated!
EDIT: fixed switching height/width around, thanks #CBroe
Good morning,
for purpose of sizing problem and element's positions on the screen between several devices, I want to display a grid as background (like a chess Grid) like this pic, for after that, displaying items like Text and Images on it.
The problem, is that the grid must be dynamical for each differents screen devices (like flex:1). That s why I don t want to use an image. Any idea about how to do it using code ? :/
I think I understand the problem and I'll explain how I would do this.
Firstly I would be using grid: https://css-tricks.com/snippets/css/complete-guide-grid/ if you aren't familiar.
I would set the parent's width and height to be dynamic and depend on the device.
Then set parent to display:grid; grid-template-rows:repeat(#,1fr) and grid-template-columns:repeat(#,1fr) where # is number of rows or columns. The fr unit basically evenly splits the available space between all of the columns/rows it needs to make. Put simply, 100px wide parent with 2 divs each with 1fr means both divs get 50px.
Put the right amount of children divs in the parent, it should auto fill the grid for you, if not then you would have to go through and put a grid-area:rowNum/colNum/span 1/span 1; on them.
Id give all divs in a row a class and then do .rowOne:nth-child(even) to style with chess pattern, so white and black.
If you needed to select a particular tile do .rowOne:nth-child(tilenumber) and go for your life.
Let me know if this helped or I did not understand the question at all :)
There is a library called [react-native-bgimage][1] which allows you to create a tiled background image, so I think this could help you do the trick. If you provide an image of 100x100 pixels with 10px tiles, I would assume the library would repeat that image for you.
Disclaimer: I have not yet tested this out!
I’ve been working on this for over 10 hours, searching the web for a solution, to no avail.
Here is the screen capture of the sketch:
I need to produce a grid layout with the following requirements:
The whole thing is in a horizontal scrolling layout.
Responsive in height, relative to its container (which is already responsive relative to body, using the Stretch-to-margin technic).
3 lines of equal height (33.333%)
Composed of square images anchors
On mouse over: color overlay with white text
The square images need to keep their proportion (reduce the height of the window, image width must scale down.
The width of the whole layout must be dynamic, since the number of squares may vary.
I’ve seen tons of examples where the width is defined, and using the padding-top value to define the height. It would not work here since the Height is the defining value.
I will be posting again with updates tomorrow.
I’m kinda desperate. Thinking of taking up drinking (kidding).
The Question is Answered!
I finally used the "vh" unit, and applied it to HEIGHT and WIDTH of all the squares.
Goes something like this:
.c-squares{
width:30vh;
height:30vh;
display:inline;
}
So clean, can’t believe I’ve never knew about "vh" unit.
What are good and recommended uses of percentage values for vertical CSS declarations?
In other words, under responsive design, are we overlooking something where % would be beneficial over em?
Because it seems that for most situations (except for cases where you want all sides equal; credit), em would be better served than %, consider:
Using percentages for the horizontal values of padding, margin or border of elements in CSS is fairly standard — especially in responsive web design. For example, take margin-left: 7.2% and padding: 0 5%. It also makes sense: the wider the screen, then the space will increase proportionally.
One can do the same for the vertical values:
margin-top: 5%;
padding: 10% 0;
border: 1% 0 2% 0;
As expected, an increasing viewport width will increase the corresponding vertical spaces.
However, in the cases I've come across, it can look a bit odd — unfitting to the design. It seems that em values may be better served.* But, on the other hand, where would it be beneficial to use percentages?
* Since these won't increase with the width of the screen, but will increase according to the font size of the page.
I don't think there's any right or wrong answers to this question. It really does depend on your design.
As you noted, % values, even on vertical-based properties on margin & padding, are still relative to the width of the document. So if your design requires even padding, then % values all round are great.
But, if the design is content oriented, and you're still using % values on the horizontal properties for responsive design, % might not be the best for the vertical properties. You may, for example, want the padding-top to be exactly the height of 1 line of text. So you'd use ems.
But I digress; it really does depend on your design and personal preference.
Yes, depending on the situation just like any other css practice.
Say you have a container div that uses 100% of the screen height and you have a header you want to appear at the top of your div. You could say margin-top: 15px on your header, which works, but then if I come and view it on my phone it will look very squished.
So instead you say margin-top: 10% then no matter what screen I come and view your site on your header is always 10% from the top of the div. which means the relative flow of your layout will always be the same.
The general rule is this: For any valid css you can write there is a use-case where it would be the best way to go about achieving your design goal. Forget anyone who says "Never use negative margins" or "always avoid absolute positioning" or any of the other crap they throw around.
I have been pondering this question as well recently and after reading around the internet the 'rule of thumb' I'm beginning to lean on is as follows. First, the reason why % is good responsive design for the horizontal axis is because as we all know the width of your browser can vary greatly depending whether the user is on a phone or computer. The vertical axis is different however because while it can also vary like the horizontal axis, many webpages are created for a vertical scroll and the user is expecting to scroll down. In such cases a little more vertical scrolling due to less responsive ems is fine.
To answer your question based on that assumption, a time in which you would use % for the vertical margin is when you have a design where you don't want to make the user scroll much to see a part of the page. Specific examples might be a single-page web app where you don't want any scrolling or a header or initial page content such as a picture that you would want the user to see in its entirety without having to scroll down.
I'm starting off building a site which should be responsive to different screen sizes. I'm using the Fluid Baseline Grid template which uses percentages for columns and adjusts according to screen sizes using media queries. Now that I'm adding my own custom CSS, I am wondering whether I should be using pixels, percentages or ems for positioning my elements (within the fluid grid elements). For example, margins and padding between divs, widths of input fields etc. Font sizes and line heights are the only things set to use ems for measurement.
Can anyone provide any pointers on this? At the moment I'm leaning towards just using pixels within the percentage based layout that the grid template has preset.
Ideally, you should be using percentages whenever possible, at least on the horizontal plane, so the margins and padding can expand/contract proportionally with the rest of the content. A 10px margin might be great at small resolutions, but it could look much too tight at much larger ones.