I have this css class the first one is to make my grid responsive, but #1000px I want it to scroll and don't wrap so that's why I make repeat 3, now the problem that some times I have 3 items, some times less
If I have less then 3 (2,1) I have a huge white space to scroll
So is there any way to have dynamic number with scroll and avoid having empty white space to scroll?
Your question is a bit vague, but I'll give it a shot. According to what you said I assume you have a set height. Try instead of using height: Xpx; setting a maximum height. So when you have less than 3 elements to show, your scroll div will only size to the visible elements.
Like this -> max-height: 300px;
Or
Use #media to set fixed sizes depending on the viewport size.
#media (min-width: 761px) and (max-width:1079px) {
.your_style {
* your css*
}
}
Firstly you need to give the stylesheet with a particular name. The style is needed to the style for the code written. After that you need to give the link of that page to the code page.(with using the anchor that and href you can can the style sheet to the coding page)
Related
I'm trying to reduce my page height but it doesn't work.
So I've tried to move my footer up, but this just leaves a space between the footer and the bottom where, strangely, elements appear to have found a new footer and are interacting with it. (not going below etc.)
How is this possible and why can i increase my page height, but not decrease it under a certain height?
There are two elements which control my front page, one is the page id "28" the other is an element called "parallax-window".
Neither of the two elements are responding to page reductions. Element .page-id-28 responds to increase in height but not decrease,. parallax-window responds to css color change but not to height instructions.
So basically, what I want to know is, what is ultimately controlling my page height amd why won't it go under a certain height but happily go as high as I want.
When I turned .parallax-window green, there was a black space underneath which im assuming is my actual page, defined by id 28.
I've tried to unset my footer position, to no avail and tried negative height for .parallax-window and .page-id-28.
So here is my html:
<div class="parallax-window fullscreen" data-parallax="scroll" data-image-src="http://4309.co.uk/wp-content/uploads/2019/08/download-2.png" data-ios-fix="true" data-over-scroll-fix="true" data-android-fix="true">
<div class="align-transform">
I tried:
#media (min-width:768px)
{.parallax-window{ height:
500px;}}
#media (min-width:768px)
{.page-id-28{height:
500px;}}
#media (min-width:768px)
{body, html.page-id-
28{height: 500px;}}
Nothing.
page here desktop
Perhaps elements on the page are increasing the height, but I should still be able to reduce the height. I've made element "parallax-window" green to make it clearer.
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
I'm using Bootstrap with HTML to build a website. Several times I have found myself putting in line breaks in the code for design purposes. This feels n00by and I want to find a better way to do this.
Example 1: I have a navbar at the top of my page. I include it in every new page. When I type something in a page it doesn't show because it's behind the navbar and I need 3 line breaks for this on every page.
Example 2: I have a layout with a sidebar and a center page. I want them both to go a little below the screen size even if there are few links in the sidebar or little content in the center page. I feel like there is a better way than to include line breaks on every page... I also want them to be aligned.
So, please help me with ideas on how you would normally solve these problems.
It's generally a good idea to separate your presentation from the actual content, so these should be done using CSS. (In particular, there are surprisingly few situations where you want to use line breaks: addresses, poems.) There is a lot of neat stuff you can do with CSS but there's no way I can explain this in one answer, so consider reading a tutorial or a book on it.
Your Example 1 can be solved by adding a margin-top to the element that contains your content:
.content {
margin-top: 100px; /* equal to the height of the navbar */
}
Example 2 is a bit more complex, but you can use #media queries to adjust the widths of the elements depending on the size of the user's screen:
.sidebar {
width: 200px; /* normal width */
}
#media (max-width: 500px) {
.sidebar {
width: 100px; /* reduced width for smaller screens */
}
}
I am looking for a layout that I saw some time ago but I forgot to bookmark. It had 3 main columns but, when resizing, it changed to 2 and the 3rd one fell down to the next row. It was NOT the normal layout resizing with overflow.
When resizing, the 3 cols actually stayed the same width until reaching some limit, at 33% of width each one but incrementing the height. The only thing that apparently changed was the text size. Then, at some point in resizing, one of the 3 ones fell down to the next row, making the 2 on the top to resize to fill the whole width (50% and 50%) and the one on the bottom to fill up the 100% of the new row. I tried googling a lot, but since I'm not native I cannot seem to find the precise terms to find it. I know it worked perfectly in the demo and was only with CSS and HTML.
EDIT, the container of the 3 of them stayed with the same width the whole time.
Media queries sound like they may be what you're after. You can specify different styles depending on the width of the browser window. It could certainly be used to achieve what you're after.
eg. Say you wanted to target devices that greater than 900px wide, you could use:
#media screen and (min-width: 900px) {
.class {
background: #666;
}
}
You can find more information on media queries here
Currently the table is too wide and causes the browser to add a horizontal scroll bar.
CSS:
table {
table-layout:fixed;
}
Update with CSS from the comments:
td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
For mobile phones I leave the table width but assign an additional CSS class to the table to enable horizontal scrolling (table will not go over the mobile screen anymore):
#media only screen and (max-width: 480px) {
/* horizontal scrollbar for tables if mobile screen */
.tablemobile {
overflow-x: auto;
display: block;
}
}
Sufficient enough.
If the table content is too wide (as in this example), there's nothing you can do other than alter the content to make it possible for the browser to show it in a more narrow format. Contrary to the earlier answers, setting width to 100% will have absolutely no effect if the content is too wide (as that link, and this one, demonstrate). Browsers already try to keep tables within the left and right margins if they can, and only resort to a horizontal scrollbar if they can't.
Some ways you can alter content to make a table more narrow:
Reduce the number of columns (perhaps breaking one megalithic table into multiple independent tables).
If you're using CSS white-space: nowrap on any of the content (or the old nowrap attribute, , a nobr element, etc.), see if you can live without them so the browser has the option of wrapping that content to keep the width down.
If you're using really wide margins, padding, borders, etc., try reducing their size (but I'm sure you thought of that).
If the table is too wide but you don't see a good reason for it (the content isn't that wide, etc.), you'll have to provide more information about how you're styling the table, the surrounding elements, etc. Again, by default the browser will avoid the scrollbar if it can.
table { width: 100%; }
Will not produce the exact result you are expecting, because of all the margins and paddings used in body. So IF scripts are OKAY, then use Jquery.
$("#tableid").width($(window).width());
If not, use this snippet
<style>
body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
<tr>
<td>Just a Test
</td>
</tr>
</table>
You will notice that the width is perfectly covering the page.
The main thing is too nullify the margin and padding as I have shown at the body, then you are set.
Instead of using the % unit – the width/height of another element – you should use vh and vw.
Your code would be:
your table {
width: 100vw;
height: 100vh;
}
But, if the document is smaller than 100vh or 100vw, then you need to set the size to the document's size.
(table).style.width = window.innerWidth;
(table).style.height = window.innerHeight;
Set font-size in viewport-width-related units, e.g.:
table { font-size: 0.9vw; }
This will make font unreadable when page is too narrow, but sometimes this is acceptable.
Put the table in a container element that has
overflow:scroll;
max-width:95vw;
or make the table fit to the screen and overflow:scroll all table cells.
There is already a good solution to the problem you are having. Everyone has been forgetting the CSS property font-size: the last but not least solution. One can decrease the font size by 2 to 3 pixels. It may still be visible to the user and for somewhat you can decrease the width of the table. This worked for me. My table has 5 columns with 4 showing perfectly, but the fifth column went out of the viewport. To fix the problem, I decreased the font size and all five columns were fitted onto the screen.
table th td {
font-size: 14px;
}
For your information, if your table has too many columns and you are not able to decrease, then make the font size small. It will get rid of the horizontal scroll. There are two advantages: your style for mobile web will remain the same (good without horizontal scroll) and when user sees small sizes, most users will zoom into the table to their comfort level.