I have the title of a page displayed in an orange box at bottom of header (see image above). This box currently has padding-left set to 15% which makes it match the margin-left of the text below only if the window width is right. But if the window size changes they no longer match (see image below).
I want the text to be aligned left in all window sizes. I did try "padding: 0 calc(50% - 540px);" for the title but that only works as long as the width of the containers are 1080px or wider. More importantly it doesn't seem to work in Microsoft Edge which is necessary.
Any suggestions on how to do this? Is it possible without changing the structure of my elements?
I would suggest that you used bootstrap if you want your page to be responsive.
There is Bootstrap Spacing https://getbootstrap.com/docs/4.0/utilities/spacing/
Related
I'm working on a HMI using AngularJS(1.7.8) and Bootstrap in which there is four main panels : the navbar, a small up-left, a big bottom left and a big right one.
The expectation are that the small up-left one can collapse to become smaller and leaving more room for the big bottom left. I was able to do that easily using flexbox. Inside the bottom-left panel there is an area that is supposed to be scrollable when the up-left panel is visible. When it is collapsed the scrollable area is supposed to have enough room to display its content.
That last expectation is what I struggle with. The scroll area is not applying the overflow-y style attribute and its height is the whole content even though it is outside its parent (the bottom-left panel).
So far I tried playing around with flexbox, setting each panel as a flexbox, setting height and various other things but nothing seems to work. Unfortunatelly I do not control the content and won't be able to fix its height. Since it needs to expand, setting a max-height attribute doesn't work.
Here is an example on fiddle.
EDIT :
From #Pablo-Binar comment, it appears flexbox don't work that great with % height attribute. I haven't found anything in the doc unfortunately.
Also from #Pablo-Binar comment, one solution is to set a height in px to the root node giving flex attributes to the child and to the final one (the scrollable one) set an height in percentage (height:100%).
Use this code
height: 100%.
If that's to high use
height: calc(100% - 30px);
That should do the job.
I was looking at this code and there is something I don't understand. You can live preview this website.
My question is : How is the height of the "Download" section (All the buzz, the yellow one) set ?
I looked in the css but didn't find anything relative to the height of this section.
Also I know that it's a pattern in the header but is there a trick to make the background-image not to move when resizing the page? (Like it does with the pattern ? Cropped)
Thank you
The height isn't really set. The height is coming from the size of the content plus padding: 150px 0; set on the container. So the height is content plus 150px top and bottom padding.
Bear with me here, this is kind of hard to explain properly...
THIS FIRST PART AS DESCRIBED BELOW IS WORKING FINE.
On this first image you see a browser screen that is wider than my (bootstrap) container. The blue is the whole screen window, the white is the container (with a max-width) with the basic 12 columns from bootstrap.
I want the laptop on the right to be wider then the x-number of columns it has on its bootstrap grid. When the (for example) 7 colums have a width of (for example) 500px and the image is 800px wide, it will naturally overflow the container (if the image is not given a width, ofcourse). So when you make your window smaller (see second image) you just cut of the image a little.
THIS SECOND PART AS DESCRIBED BELOW IS THE PROBLEM...
Now I want to have the same thing on the left side... But When I have 7 colums in my bootstrap, that are (for example) 500px wide, and I have an image inside that, with a width of 800px the overflow happens naturally on the right side again. I would like this to be on the left side!! So something like having a div with an image inside the is aligned to the right, but the overflow is on the left.
THIS IS WHAT IS HAPPENING RIGHT NOW: where the overflow is on the right (when it should be on the left).
I do NOT want to strech this image longer than the natural width of the image
I PREFER it being <img>-tags in stead of background-image, but if this is not possible I can accept that.
Some Code is provided in this JSFiddle
Use
.imgLeft{
direction: rtl;
}
OR
.imgLeft{
position: relative;
}
.imgLeft > img{
position: absolute;
right: 0;
}
Giving max-width to image will works
.imgRight, .imgLeft img{
max-width:100%;
}
I need to have 2 equal width divs side by side, the left column contains an image and the right column will contain dynamic text where the height of the text div can vary somewhere between 400px - 550px depending on how much text the site owner inputs.
I need the image to line up flush at the top and bottom with the end of the text box. The container element is fluid to be responsive.
Desired Effect
What I have at the moment is using floats to line the elements up together and responding fine, but the image falls short, like so:
I tried setting the image as a background-image on the left column with...
.column-image{
padding-bottom:100%;
margin-bottom:-100%;
background-size:contain;
}
But this still falls short a little unless i tweak the padding-bottom amount. This is then rendered useless when I re-size my browser as the aspect ratio changes.
I am trying to avoid using Javascript to solve this.
Use display:table for the container and display:table-cell for the inner divs. Also make sure to remove the float
Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.