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 know this is maybe a duplicate question, but I have already searching and trying all answer here. and there is no solution for my problem :(
My Question :
https://jsbin.com/wujiliqehi/1/edit?html,css,output
how to make materikonten wider than card likes secondary pic ?
Solution :
div#materi-konten{width: auto;margin: 0 -20px; !important;}
.card{overflow: visible !important;}
another solution for responsive layout
#media only screen and (max-width : 640px){
div#materi-konten{width: auto;margin: 0 -20px; !important;}
.card{overflow: visible !important;}}
sorry for my bad english &
thanks for everyone.
Assuming there is no overflow:hidden on the parent div (card), then you could set position:relative, set the top and left properties to place the child in the correct position, then use width and height to make it the right size. This would be VERY difficult to do responsively - you would be stuck with fixed size boxes I think.
Without code examples of what you have tried, I cannot be of more help.
Simply make it bigger in the CSS, either with pixels or percentage:
.materi-konten {
width: 110%;
left: -5%;
}
.card {
overflow: visible; /* make sure we can see the child if it is bigger */
}
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 7 months ago.
Improve this question
I am doing a frontend mentor challenge and I cant get the picture to look how it looks in the picture. I tried making the container position relative and the position absolute but it makes the page wider even if i put overflow: hidden. I am doing mobile first so i'm trying to get it to go from mobile to tablet size with the media query.
I have the figma file on github if you want to see that https://github.com/JosephCass/e-learning
Figma Tablet Size Screenshot
code https://codepen.io/Joseph9384/pen/gOvVdYv
In your media query (min-width: 768px):
Use transform: scale(2); and left: 200px; on your header-image and adjust the value of left and scale property according to your need. Also you can remove overflow: hidden; from header-image as well. Don't use overflow: hidden; on the parent div since it will hide especially the bottom left stat thing which you don't want that to happen.
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
I know this is a common bug but haven't been able to find the reason and to fix it with the usual solution of hide x axis overflow.
Can anyone tell me why there is white space to the right on small mobile devices such as pixel and iPhone 4? I haven't been able to replicate this on emulators. The problem occurs on mobile chrome and mobile safari and does not occur on firefox.
The theme I use is static home wordpress with "business page one" theme. Here is the link for the staging website
Any help would be much appreciated i'm not a web programmer just trying to finish my small wp site
Normally this problem is related to the following reasons:
The viewport is not set correctly (make sure that the initial-scale is set to 1.0.)
The body is not 100% for some reason.
There is some element overflowing (for example an image) that is expanding width (make sure that the overflow is hidden, or make sure that anything overflows the body width).
Try to inspect further with dev tools...
.site {
max-width: 100% !important;
}
.site-header {
max-width: 100% !important;
}
#site-header img {
width: 100% !important;
}
Add this css in Appearance -> Customize -> Additional CSS
let me know if this solves your problem.
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 cannot seem to find this anywhere yet it seems to simple.
I have a full width website using .container-fluid. The site is divided up into full width rows. I want the rows to be responsive in height. (if the row fills about half the viewport on a desktop, it shrinks to fill about half the viewport on a tablet)
I would highly appreciate explanations with sample code vs "here use this..."
Thanks!
You should think about using viewport units: vh
So, if you want a row to be half the height of the viewport, on any device it's on, use 50vh
jsFiddle Demo
It is for may solution. But one way is the viewport unit. This is a best way for the make responsive div height.
.row {
background: #c62222;
height: 50vh;
margin-bottom: 10px;
color: #fff;
font-size: 18px;
line-height: 50vh;
text-align: center;
}
<div class="row">HALF RESPONSIVE DIV</div>
<div class="row">HALF RESPONSIVE DIV</div>
Open this url:
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
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
My website is not working correctly in the mobile browsers here is the link
the navigation panel is not stretching 100% not covering the about us section
when viewing in the browsers please take a look and suggest a solution thanks.
Let me explain:
1) You want to avoid hardcoded margins cos you never know what type of screen size the user has. Instead position your nav in the middle with automatic margins, like this:
nav {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 50px;
font-size: 18px;
font-family: helvetica;
}
2) Your nav now tries to fit its parent div (navbar), but navbar does not have a width set, so the width stays at 900px. But your #maincontain again has a hardcoded width of 1280px. Your images also have a width greater than 900px, this stretches your page to the biggest size but the navigation remains 900px therefore does not stretch.
3.1) Easy solution: set navbar to have: width: 1280px;
3.2) Correct solution: Remove the hardcoded width from your #maincontain, your images and anywhere else that stretches the screen.
3.3) In a long run, you will struggle to make a responsive website like that, I suggest using http://getbootstrap.com/ as a template, as its responsive, or learn how to use media queries to make your site responsive.
If this helped please UP the post and mark it as an answer! Thanks
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 8 years ago.
Improve this question
I am creating a webpage in which there is an image on the extreme left when the browser is maximized but as soon as the browser gets minimized i want the image to move to extreme right .. How to do that ? I tried float but it's not working..
Do you mean minimized to task bar or resize window? because when you minimize to task bar the image don't visible anymore or i miss something? anyway if you mean resize so:
Use Media Queries:
img{
float:right;
}
#media (min-width: 800px) {
img{
float:left;
}
}
This cause to image float:right until window's width is under 800px and if the browser's width resize to larger than 800px, the image change to float:left