I'm working on a new site. I have a layout question. We are using bootstrap 5.
Here's the layout I need:
I'm having trouble with 2 things:
1 - the burgundy testimonial box on the right. It needs to overlap the orangeish image above it. I did this by add negative top padding to the div that contains the box. This moves the box up and causes it to overlay the orangeish image. This box will contain varying text and text this is browser drawn. So I can't use an image for the tesimonial. I'm wondering if there is a better way to do this - instead of using negative padding?
2 - The "Employment" text. It is browser drawn and is in it's own div above the page content div. Again I set a negative top padding to move the Employment text up and place it over the orangeish image. I could add the text to the image but that adds an extra layer of work for any new pages that might get created. Again I'm wondering if there is a better way to do this other than negative top padding.
Grateful for any suggestions!
Related
So on desktop I want 4 columns with an image above the text like the first image (so col-3), very easy. (I have the image and text in the same col)
but on mobile I want the icon appear on the left and the text on the right as per the second image.
i have tried floating the image lleft and the text right but that doesnt work I tried splitting the image and the text but they won't line up properly on all screen sizes if i do.
This feels like it should be so easy but my brain is stuck.
You can try using Flex instead of floating divs for the div that contains col class
See here an example - https://playcode.io/995433 (Try to resize the playground viewport to see the mobile layout). I hope this is what you need. I've used BS inline classes for convenience.
Bootstrap align div horizontal to vertical on responsive There is your reference
For the needs of an internship project in WordPress, I decided to slightly superimpose a white block containing text, on the left of a photo.
These two elements are in a container.
This is my-figma-example.
I already tried to play with the z-index and the position, only it works on the text contained in the block and not on the block itself...
I also failed to paste the image on the right edge of the screen without the white block being stuck to the left edge.
Do you know how I can do this?
I have done the same with negative padding and z-index, remember to apply a lower z-index to the second column and not to the general horizontal block.
I'm struggling to build an iOS-style table cell component, with title, subtitle, info text on right side, disclosure arrow (chevron) and optional icon. From left-to-right, this can be thought of as:
fixed-width icon
variable-width title/subtitle
variable-width info text
fixed-width chevron image
Without the icon, I have this, which looks pretty good:
But once I make the icon visible, it pushes the chevron off the screen:
Because both text fields are variable-width, I cannot set a width on them (instead I have flex: 0 on the left one, and flex: 1 on the right, which causes the left one to be as big as it needs to be, and the right one to resize to fill whatever remaining space there is). In general, this all works well, except that the fixed images on left and right (icon and chevron) cause the left text to start pushing the chevron off the screen (the right text is zero-width at this point, so whether it's off-screen doesn't really matter).
I've tried all manner of fixes, but the only things I've come up with require measuring the size of components. The two hacks were:
1) Set maxWidth on the left text, subtracting the icon / chevron sizes from the total container width.
2) Set paddingRight on the top-most View, to include the measure width of the icon.
I'm trying to avoid either of these, because the size of the icon/container are unknown, and I don't want to have to add an onLayout handler to measure them and recompute. Any ideas how this would be possible?
Here's a gist of where I'm at, I've replaced the chevron with a fixed-size orange view: https://gist.github.com/jd20/36456c95011b65c0280cba920365b1f6
For me it helped to simply add flex: 1 to the styling of the Text. Then it adjusts appropriately and lets everything else fit in.
You can try to give position: 'absolute' into styling & some padding according to if need be.
When I float images on my WordPress site, the text is not aligned vertically with the image, but appears a bit lower on the page. I suspect this is to do with line-height of the text, but I'm not sure how to fix it.
Here's the example. Scroll to the bottom of the page under Recommended by:
http://www.myfiveacres.com/hidden-gems/saison-market-vineyard-duncan-bc-canada/
You should post your code, but one thing you could try is adding a negative top margin to your text.
margin-top:-*px;
And of course, replace the * with however many pixels are needed.
I am trying to do something that should be simple but is apparently not so. I just want to make a simple single line navigation bar using a list tag. Thats fine, I can do it. The problem is making it wrap gracefully and still keep the same layout when it needs to appear over multiple rows due to not enough horizontal browser space.
As I say, I'm using a list tag and I have the ride side border of each LI item with a visible vertical line to make the divider appear. The final item I am not shwoing that with a last-child pseudo class. Its important that the far left and right buttons DON'T have vertical borders. This is clear in the top image.
The UL tag itself also has a top/bottom border line visible and in the first demo in the image you can see this clearly.
So now what happens when the menu bar wraps... well there there are 2 key problems...
1) The main issue is that when the menu wraps I can't think of a way to make the new MIDDLE horizontal line appear [shown in red in the 2nd image]
2) Multiple list items now don't need a right side border value. In the example 2 list items don't need a right side border. This could grow to 3 though for some screen displays.
Does anyone have any ideas for resolving this?
Note that I am trying to make the menu wrap naturally, not at fixed pixel break points as its so unreliable for something like this with different pixel density screens and font zooms in certain browsers.