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 1 year ago.
Improve this question
I'm trying to create a responsive table layout in tailwindcss where certain columns will be hidden if the display size is mobile.
I'm adding hidden sm:inline-block to the th and td values that I want hidden, but the inline-block display breaks the normal flow of the table. I've tried block, flex, inline-flex, etc. but they all mess with the layout of the header and columns when viewed at the larger screen sizes.
What is the "normal" display for these elements that should be used in the breakpoint directive instead of inline-flex?
Here's a look at the code, by removing the hidden sm:inline-block you can see what should be displayed vs. what is displayed.
https://play.tailwindcss.com/jyMaE0MVWx
The default is display: table-cell so setting sm:table-cell should do the trick. Here is a remix of your play https://play.tailwindcss.com/g7PJ6ETsX5
Edit: You can always find the default display property for an element in the inspector inside the computed properties tab.
Related
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 9 months ago.
Improve this question
i have a problem with form inputs on only on safari. I don't know why they stick out beyond the edges of the form.
Why is this happening
This happens because inputs have a default width determined by the size attribute of an input. You can learn more here.
Workaround
You can adjust the size attribute or make the parent bigger but my favorite way is to create a div that wraps input and its corresponding label, give it a display: flex, and a flex-direction: column. This way input will always span the full width of the parent. Example
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 1 year ago.
Improve this question
So, I imported a demo theme (wordpress). The theme came with some issues including a horizontal scroll that the developer is refusing to fix. I would like some assistance to explain how to remove the horizontal scroll or what is causing it so i find a way to fix it with CSS somehow.
site is located here - http://corporateh27.sg-host.com/
If you get horizontal scroll issues the best thing to do is put an outline on every element using:
* {outline: 1px solid blue;}
This then effectively adds a border to every element on the page (it is better to use the outline property as opposed to border because outline doesn't add any pixel values to the size of the elements the way border does).
You will then be able to see which element is causing the problem and fix it.
When you find the problematic element a lot of people tend to add overflow: hidden; on a parent element. Generally I would recommend finding the specific issue/child element causing the problem. In your case it is being caused by padding values added to an entire list of bootstrap classes. I've deselected them in the image. (see Image):
Instead of picking through all of those values, in your case it's probably worth just adding .content {overflow:hidden} which will remove overflow from the main .content class. Some of the code being used in that theme is woeful.
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 2 years ago.
Improve this question
Hi i want to know that how can we create column in a row with html and css.
Like this in the picture.1
You can try using one row like container, inside create 4 div's and add display flex and justify-content.
You could use Flex Box to have a single row of items and use the boxes to space appropriately, this will also provide scaling for different screen sizes.
Here is a link to a great explaination of what Flex Box can do: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If that's not what you're looking for, there's always making a table.
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 4 years ago.
Improve this question
I am trying to set my logo in between the menu. I am able to add logo but not able to make it work properly. My logo shows in a single line but all the other menu items show in a line. I want to show the whole menu in a line. Here is my website link: http://savourthemoment.fr/home
Thanks in advance for your help.
There are two modifications to be done.
1. The link which contains your image element is 1040 px wide. I changed it to:
a{
width: 104px;
}
However its better to reference it using an id or class rather than using the anchor tag as it will manipulate width of all the anchor tags.
The width of the image is set at 10 %. Change it to a 100% so that it occupies the entire width of its parent element.
img.savour-home-logo{
width:100%;
}
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 5 years ago.
Improve this question
I am working on my website development. While creating the portfolio page, I encountered the issue of the last column moving to next row.
I do have images larger than the parent container but I figured it out to display properly, however, after applying the margin the last column went to next row.
Please check the link below:
https://bootsnipp.com/user/snippets/o1e9d
I also wanted to add img-thumbnail class but it does not look proper and adding padding also didn't work as expected.
Please help.
Thank you.
You have added margin: 1px on bootstraps column class which breaks the last column.
Add another div inside gallery_product and apply border/margin to inner div.