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 6 months ago.
Improve this question
Please see this page: you can see the same code snippet twice: once embedded via GitHub Gist and in the second part via Jekyll's internal syntax highlighter Rouge.
I'm trying to style the second code snippet similar to the GitHub Gist. I'm making progress, but I don't know how to reduce the width of the second code snippet via CSS. It should have the same width as the surrounding blog content (like the GitHub Gist) and show a horizontal scroll bar.
How can I reduce the width of the code snippet via CSS and display a horizontal scroll bar?
Thx!
You can set the width to 100% to fill the surrounding blog content and use the overflow-x property to display a horizontal scroll bar.
.highlight {
width: 100%;
overflow-x: scroll;
}
You can use overflow-x: auto; instead of overflow-x: scroll; to let the browser decide when to display a horizontal scrollbar, e.g. when content is overflowing.
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 11 months ago.
Improve this question
I've been working upon a Personal Portfolio for a few days now. I originally made it for my freeCodeCamp certification. But, now I wish to expand it however I've been facing a strange issue with the page where part of the body goes off-screen. I've tried resizing and removing the height of various elements and changed their display and position properties. But it's not working. I mean, it's not the biggest problem since all text and images are visible but still it's annoying.
I've hosted it through Github Pages here is the link:
brainstormed.github.io
It would be of great help if someone could point out what I'm doing wrong.
Thanks!!
The fixed padding of 40px on projectTile CSS class is causing the issue. On small screens the horizontal space is already filled by the image width: 80vw; padding: 10px; margin: 20px. You can either remove that padding or use a media query to remove it on small screen sizes.
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 3 years ago.
Improve this question
The footer in the main home page works fine: https://michaelarabic.blogspot.com/
It doesn't work when you're on a Page or a Post.
Page: https://michaelarabic.blogspot.com/p/home.html
Post: https://michaelarabic.blogspot.com/2019/03/test-2.html
This is one of the default blogger templates. I tried to figure out what's the <div> that is responsible for the footer.
Using inspect feature in Chrome, I can guess that they are the ones that have those classes: footer-outer and footer-fauxborder-left.
After figuring out the possible or the potential class names. I used the method in this question: Make footer stick to bottom of page correctly
There was some changes in the footer but that's not what I wanted. It became very thin and it doesn't respond to changing the height. I faced some issues while trying different solutions from other websites.
If it's hard or impossible to stick the footer to the bottom. At least, I need a method to hide it.
This is very simple,
just fix the
position of your footer content to fixed
,it will ready your content to fix to a point, now the browser looks for the position where it need to be fixed so just pass
bottom:0;
now in your case the content is not containing the full width so to recover that we need to provide a
width to 100%
so your final code looks something like this.
footer{
position: fixed;
width: 100%;
bottom: 0;
}
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 6 years ago.
Improve this question
I have a hero image, and on the top of it, I want a logo and menu,
I have given below properties to hero image. and for nav bar I have given a position: absolute; and width : 100%.
I dont want that horizontant scroll bar, please help.this is how my page look like
height: 551px; width: 100%;background: url(../_images/banner_1.JPG) no-repeat;background-size: cover;position: relative;
You mean window horizontal scroll-bar, so to hide that add below code and change you navbar div to 100%,
body{
overflow-x:hidden;
}
for removing horiontal scroll bar
add overflow-x: hidden
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 7 years ago.
Improve this question
I've looked at many a thread and understand the width and display tags ( min, max, block inline, inline-block and table etc), but I'm having a terrible time trying to fix this issue with my page footer. When I resize the browser window, everything in the footer collapses.
Can someone kindly check my markup and let me know what I need to add in my CSS to fix this, please.
Basically I'd like the browser window to pass over the content and all that contained be fixed centrally... how it looks, laid out, when window full-size.
Thanks!
Site: http://mixititb.com/Z_Test_Site/index.html
Edit;
Two issues I'm seeing are when you change window size, the footer itself is collapsing and perhaps making the content bunch up. So, that would be first priority fix and then aligning the content center.
For these two issues, I'm really stuck and truly appreciate the help for a newbie to get this fixed. Thanks for checking my code!
Edit 2;
Just fixed the footer sizing with overflow-x: hidden; for the fix_footer class! :)
So, now we/I just have to figure out why the content is collapsing when you resize the window. Any takers? :) :)
Edit 3;
# PeeHaa, easwee, mario, user35443, Starkeen... please kindly take this off hold, I'm unsure how to edit the question as I've fixed some issues myself and too with help from those below, but a few remain, so didn't want to ask another question. Thanks, appreciated!
Edit 4;
Fixed through reorganising HTML structuring div's with classes and setting .container to white instead of the footer itself. Setting all main div's (i.e. nav, content and footer) with a class of container allowed fixed scaling of the footer as it was taking the width set in CSS.
Thanks everyone for the help!
Search media queries on google and center the elements with text-align: center or margin: 0 auto, if the elem are floated, use clearfix.
Your footer breaks at about 900px.
Example:
#media screen and (max-width: 900px) {
center your elem
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am creating a Wordpress blog where I have a grid of over 1000 items I have the items wrapping down the page. I tried searching online but couldn't figure out how to get a "scroll view". I want it so there is almost window within a window. If you look at the image bellow only the black area would scroll not the entire page. So how do I achieve this mini window affect in my blog?
Just use overflow: auto for div which u want to have the scrollbar. In case you want it to have the scrollbar all the time use: overflow:scroll. You need to have fixed height if you want to use this parameter I guess.
More info here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
My demo: http://jsfiddle.net/cXvDc/9/
you seem like you need
<div style="overflow: scroll; width: 100%; height: 200px">content here</div>
this will create a 100% wide, 200px tall div that will scroll once the content within it becomes taller than 200px.