Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
There is extra white space in the right of the body which appears only on mobile screens despite that i'm making overflow-x :hidden to the html and the body tags and all the page is the same width
html,body styles
//css file link
https://github.com/Jjemy/Landing-page/blob/main/src/App.scss
I think the max-width: 100vw, is affecting the width. Try taking it out as this may be the cause of the problem.
I've figured the cause out ..
I'm giving some images a position absolute and when i change it the problem disappears but this affect the images position,
is there any other option?
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 13 days ago.
Improve this question
I'm studying this website and I noticed that on the mobile version of it the website isn't centered and some links are causing there to be a horizontal scroll rather than the rest of the link just going to the next line. How can I fix this?
This is the website in question: https://www.southmountaincc.edu/current-students/learning-resources/learning-center
[picture of webpage](https://i.stack.imgur.com/cO5Q6.jpg)
picture of webpage
I've tried to add in display: inline-block, and width: fit-content;
block-size: fit-content; but none have worked. The text in the ul will change but the links will stay the same.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Im trying to only show a piece of this img (the laptop). The hidden part being on the outside of the page. How do i make it so it doesn't actually expand the page where you can then scroll horizontally?
Hi Depending on how thing is built, if its in the background image then you will need to use background-position when it goes into a smaller screen resolutions.
If this is an actual then this can be tricky because there is a few options. you can set the parent wrapper to have overflow:hidden and use margins to tuck move the laptop to only be shown.
You can also probably use position absolute to move the image into position.
If you want this to be only a mobile thing make sure you wrap it around a media query
#media only screen and (max-width:768px) {
.myclass {
css: value;
}
}
If you can share some mark up with some css we can better help you :)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I want to put this:
on my website:
What code should I add? I found this piece of code but it didn't work for me:
<td nowrap align="left" style="word-wrap: break-word"><pre style="width:initial !important; margin-left: -25px;">
Thank you very much and excuse me for my English
As said, adding overflow:scroll in your CSS is an option.
But I would go for auto instead of scroll in order to hide the scrollbar when the content is not clipped. That's a decision to take depending on the design you want.
Set the overflow property in css of that div or td tag to scroll
overflow:scroll
or you can do
overflow: auto
Set overflow:auto to div. so the div scroll come if content size more than div width.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm wanting to have it so that above the Nav is a large logo and slogan, and as the screen size shrinks below 768px the position of both elements changes.
So to start with it would be like so
and change to this
How would I go about this?
Drop the logo <img> twice... once in the top and once in the menu.
Then hide/show the appropriate --- use grid responsive utils: http://getbootstrap.com/css/#responsive-utilities
i.e.
.visible-xs on the inner menu logo
&
.hidden-xs on the top logo
(I'm assuming BS3 here.)
EDIT: See this JSFiddle
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am using a bootstrap 3 grid on my website and I am having trouble with getting rid of this extra space thats to the right of all my content. Allowing the bottom scrollbar to be visible and move. I dont want to hide the scrollbar I know How to do that. I simply just want to fit the content to the page so that there isnt reason for the bottom scrollbar to display. Just want to make my content fit to the page. So I can continue redesigning.....
www.Trillumonopoly.com/index2.html
Actually this should do it
.container-fluid {
padding-left: 0;
padding-right: 0;
}
AND delete .row from where your .navbar-default also are. :)