Responsive design and margins [closed] - css

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 7 years ago.
Improve this question
With responsive designs, I heard we should use "%" instead of fixed measurements like "px" .
But it doesn't work how it should with margin?
I have a logo and links underneath it.
I added margin-bottom: 2% underneath it and it looks perfect from pc
But the links still overlap kinda in mobile.
What to do?

You have a negative margin on #page-header of -16px which is pulling the links back up...

Float your logo to force margin-bottom to work or use padding-bottom instead.

Related

How to make window resize not take any change [closed]

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 2 years ago.
Improve this question
I have a question:
How to make a responsive design that when I resize the window the design not change at all(width, height, positions), only the window cover the design/content.
For example this website: https://www.zap.co.il/
How can I dot it if all elements are viewports and almost every element positioned absolutely to the body tag ?
For the viewports I can use SVG - It solving it, but the position ?
I want everything remain the same, thank for your help
this should make your page basically responsive
then for resizing components at different widths
`<meta charset="utf-8">` html code
#media screen and (min-width:800px){
//css code for screen widths above 800pixels
}
css code

slider same size as navigation in wordpress [closed]

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 8 years ago.
Improve this question
i would like the slideshow to have the width as the navigation menu and respond to different devices as the navigation width would.
Heres a link to the website in question http://test.amplifyevents.uk
Just change the width of rev_slider_1_1_wrapper to 100%? Your slider will be lining up with Home, not with the complete left of the nav-bar, but that can probably be fixed with a margin.
#rev_slider_1_1_wrapper { width: 100% }

Extend header to full width on Wordpress.com theme with custom CSS [closed]

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 8 years ago.
Improve this question
I'm looking to extend the header image to be full width on a client's blog which is hosted on Wordpress.com, but it doesn't seem like the theme supports it natively. Something seems to be cropping the image automatically.
Is there any way this can be done using CSS?
http://ryanmangansitblog.com/
Thanks in advance!
this is caused because of the <p> element located in #hero .hero-content which has a max-width variable set in style.css, if you remove this rule #hero .hero-content p { max-width: 770px; } your problem should be solved, and the image should be shown full width.

Margin right ignored in bourbon neat? [closed]

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
http://cdpn.io/ezIxj
I'm working on a portfolio site and would like each project box to span 4 columns on all layout sizes. Their width seems to be correct based on the column grid shown. But why do the right margins get ignored by the browser??
Because .project is indeed the last child in .project-container div.
I'm not massively familiar with Burbon - just switched those ( .project and .project-container ) classes around
so now .project:last-child properly applies to the last-child
Have a look: http://codepen.io/VarinderS/pen/kwgms

CSS - border-width issue in Safari + Opera [closed]

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 8 years ago.
Improve this question
My top navigation is short by 2 pixels, but only in Safari and Opera.
http://orbitprint.com/canvas/
The ul has a box-shadow, so you can see that the last li is short. I can't figure out why for the life of me!
Is anyone able to throw some light on this for me please?
Well you use percentages in a pixel layout. Your Panel is 969px wide and 8Buttons with 12,5 percent (=> 969/8 = 121.125px) which have to fit into a natural numbered pixel. So the best would be to use display: table for the menu and display: table-cell for the buttons. That should split the given space as evenly as possible.

Resources