I'm working on a online-shop for a winery. Link to the page is http://develope.haimerl.at/shop. In the shop page all wines are shown with some information. Every second product div should be a bit smaller which works fine in screen widths under 1000px but doesn't work from 1000px or higher.
I'm working with a bought wordpress theme and was looking for any breakpoints in CSS that would explain this behaviour. When I'm setting a fixed height with the :nth-child operator it just cuts of the child elements.
Maybe, has anyone got an idea how could I manage that every second element is a bit smaller than the other ones?
Thanks in Advance
If you check your css code there one breakpoint which is affecting your pile-item-even-spacing class which has min-width: 999px.
#media only screen and (min-width: 999px)
.pile-item-medium-3d:not(.pile-item-small-3d):not(.pile-item-large-3d) .pile-item-even-spacing, .pile-item-medium-3d:not(.pile-item-small-3d):not(.pile-item-large-3d) .pile-item-portrait-spacing {
padding-left: 0;
padding-right: 0;
}
Please comment/remove and it'll work.
Related
I'm having a problem moving a panel slightly of the page like that:
enter image description here
I tried width: 120%
it does work but when I resize the image moves out of its original position, I'd like it to look similar on different screens, the panel is inside the bootstrap 4 container coz I use bootstrap 4
Pls help, thank you
Here's a quick pen that might help you. Codepen Link If you create a pen or share your code I'll take a look for you mines just a rough idea but might help you.
If you are trying to get the image off the right of the screen use margin-right: -???px but make sure you have overflow: hidden on the wrapper.
Without seeing any code to try and reproduce the problem on our end, I would assume that you need to set the width of the margin-left depending on the viewport. This means that with different viewports you need to adjust the margin accordingly.
Check this out based on device size.
/* For devices smaller than 400px: */
body {
left-margin: 100%;
}
/* For devices 400px and larger: */
#media only screen and (min-device-width: 400px) {
body {
left-margin: 50%;
}
}
Take a look at W3's Informative Series on responsive web design.
https://www.w3schools.com/css/css_rwd_intro.asp
I am working on that website
https://steelmountain.io/new/
I tried to fix css but still zoom-out the website its gone worst.
Can someone please help me to fix my mistake.
Thanks
Layout seems fine to me honestly, at least from a desktop point of view. When you alter the screen height/width there are a few overlapping elements, which can be fixed by adding spacing, padding, and margins within the corresponding css #media. Use percentages to ensure that pixelation does not remain constant
For instance,
#media only screen and (max-width: 1200px) {
.hero__form .form-control {
padding-top: 10%
}
}
I am really desperate about DIV elements positioning bug when trying to create a template for a new responsive layout web design.
The URL is: http://cs.renault-club.cz/responsive_005_bug.php
The problem: when you resize the window to be less than 800px, the "sidebar_right" (online users) DIV element displays not directly under the "obsah" (content) DIV, but bounced under the "sidebar_left" (menu) DIV element.
Please HELP! I spent already 2 hours trying anything, but without any success :(
In less than 500px it works fine, as well bigger than 800px. The current window width is displaying on the top left corner.
You have a 2 media queries causing it to push down: if you remove this
#media screen and (max-width: 800px)
#obsah {
width: 80%;
}
and also remove this
#media screen and (max-width: 800px)
#sidebar_right {
width: 50%;
}
it will work as you see below:
well, between 500 and 800px #sidebar_right has a with of 50% - that's too much to fit right of the other elements (seems like this is defined inline, in the style tag at the top of that page)
that's not a bug. it is how the box model works. try:
#sidebar_left { float:left; }
I'm trying to get familiar with responsive, mobile-friendly layouts by redesigning my online portfolio, using the SimpleGrid framework (this one: thisisdallas.github.io/Simple-Grid/) combined with elements of HTML5 boilerplate to help get me started.
Here's what I've got at the moment: http://pftest.comyr.com/grid/
One of the issues I encountered was figuring out how to get the grid columns (specifically, the 3 div columns containing the hexagon shapes) to collapse at the different screen-size "breakpoints" with CSS media queries so that they won't simply overlap each other at smaller screen sizes.
After a fair amount of trial and error mucking about I eventually discovered I could get it to to collapse to two columns for tablet screen-sized devices by applying a class/ID with width: 50% and float: left to a media query of: #media only screen and (max-width: 908px) { } and (hopefully) now it collapses neatly into two columns at roughly that size (at least it does from my brief testing)
The issue I'm having is now is figuring out how to get it get into collapse into a single column for the smaller smartphone screen-sizes (#media (max-width: 22em), #media (max-width: 320px) ect.
I have tried various different properties using the same #workgrid ID I used for the two column breakpoint - but for whatever reason just can't seem to get it work, and unfortunately there is little to no documentation included with the grid framework that might aid me.
The CSS in question is:
#media (max-width: 22em) {
#workgrid {
width: 100%;
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
}
Which is applied to each of the DIV "col-1-3" classes.
As you can see at the moment it collapses into the two columns and then begins to overlap at any screen size smaller than that. I'm sure it is something relatively simple I'm missing/not seeing and just need a bit of a push in the right direction... :)
The main problem is that you're working with unresponsive units inside the responsive elements of your grid and you're not using max-height and max-width for elements like images.
For example, you have an element class called .shape whose width is 300px, this class is a child of #workgrid whose width is 50%. In a small browser viewport with, for example, a 320px width, your #workgrid width in pixel will be as much 160px while .shape width will be the same, 300px, this causes the content gets out of the space and collapses with other elements space.
Here are two links that maybe help you to understand fluid elements better:
Fluid images
max-width
To fix your grid you should use max-width and max-height instead of width and height in some classes and change some css properties like background-size. Another way to solve it is using responsive units instead of fixed units in sizes. A responsive web needs responsive measures.
Fix that takes time and can be exasperating, so if you want an alternative solution yo can solve your problem changing yor main.css and simplegrid.css this:
#media (max-width: 22em) {
to this:
#media (max-width: 41em) { // If it doesn't work, test a larger number like 44em or something like that
Your grid starts to collapse when the browser viewport is smaller than 656px (656px = 41em for a current font-size of 16px), this grid becomes a single column grid when the browser's viewport width is 22em or less, so changing 22em to 41em we make single column appears before the grid collapses, thus making grid works well.
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design