I've been trying to center align these images but they just won't go. I've trying messing around with the sizing and the left-align but nothing works. What do I do?
Here's the JSFiddle: http://jsfiddle.net/4uGtq/embedded/result/
left-align:50%; /* Doesn't work */
#icon-wrapper a {
display: inline-block;
width: 175px;
height: 175px;
}
The width and height are necessary in this case because you have the images absolutely positioned. If you didn't have the width and height, everything would kind of fall in on itself.
When I try your demo (in Chrome) the images are center aligned as a group as long as I don't resize the browser to more than 1300 pixels wide. So given that you have a bunch of #media only screen rules for different max-width and the highest number you go up to is (max-width: 1300px) that behaviour makes sense doesnt it?
Change this line:
#media only screen and (max-width: 1300px) {
to this:
#media only screen and (min-width: 1001px) {
and it should fix it as shown here: http://jsfiddle.net/4uGtq/6/embedded/result/
Related
I am using wordpress to develop a website called littleboyauciton.com. I added an image at the top right of my header, and added css code:
img.sslsecure {
max-width: 40%;
min-height: auto;
}
This is displayed normally on my computer screen. But when I use chrome to simulate the ipad screen, the picture cannot be displayed on the header.
I added the css code corresponding to the screen in css, but it still has no any effect:
#media only screen and (max-width: 768px) {
img.sslsecure {
background-attachment: scroll;
}
It is doing exactly what it should do, it takes up 40% of the width of it's parent div. When you inspect the element, you can see that the parent actually almost takes up 100% of the screen width.
You can fix this by adding extra css for different screen sizes. This can be done in the theme you are using.
Or you can add extra css and write a media query yourself.
See:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Edit.
I just saw that you've tried adding a media query. You did it right, yet you have to change the width of the element or the parent element. background-attachment: scroll; only applies to elements with a background-image. Since this is an img, it doesn't apply to this element.
Let'say, I don't want the image to be wider than 100px:
#media only screen and (max-width: 768px) {
img.sslsecure {
max-width: 100px;
}
}
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
I have an example of a website for this question (because I can't figure a way to ask it..)
https://livedemo00.template-help.com/opencart_62166/
As you can see, if you resize the browser width, only the margins resizes, and not the divs inside it.
Is there a way to acheive the result in CSS? Do I have to use Javasciprt to achieve that? Thank you.
In that example the developers are using media breakpoints. These apply different styles to elements depending on the browser window size. A tutorial is here
Basically your CSS looks something like this:
#media screen and (min-width: 500px) {
body {
width: 800px;
}
}
#media screen and (max-width: 500px) {
body {
width: 300px;
}
}
I am picking up an existing free template Jessicawhite at html5xcss3.com
I notice the images stretch 100% in any screen and in large screen (MAC wide screen for e.g.), it looks really ugly especially the home page slider.
I want to center the whole page/body if the screen is larger than the max size of my images (1280px, sized in the server) like in this site: igihe.com I tried playing with bootstrap-responsive.css. The highest screen it deals with is 1200px min.
#media (min-width: 1200px) {
}
My attempt was for screens with minimum 1400px:
#media (max-width: 1200px) {
//leave original intact
}
#media (min-width: 1400px) {
body {width:1366px; margin:0 auto;}
/* OR */
.body_container {width:1366px; margin:0 auto;}
}
As well, I just tried changing the min-width:1200px to min-width:1400px but it doesn't behave well either.
My issues are: it doesn't correctly react. My screen size is 1366px, which is less than 1400px yet it applies the body styles.
Need i add all the specs under each media to each screen size after words? Meaning, the min-width:1200px contains a bunch of specs. Does that mean each screen size has to define it?
Any shorter solution that puts the menu in consideration?
You can just use the simple css3.
use a wrapper division o wrap all your elements and this wrapper have a display:none; by default for all width of media.
.wrapper{
display:none;
width:your-width-num px;
margin-right:auto;
margin-left:auto;
}
And for the wider screens:
#meida(min-width:your-width-num) {
.wrapper{
display:block;
}
}
I am using twitter bootstrap and change default width to 1265px. Try resize out window to 1265px. (demo http://markup.website-builder.ru/demonstration/test.html )
In example we have few blocks and when you resize window - the bug appears. A mystic white line on the right of the screen http://take.ms/fOEn2
How could i fix this? Why is it appears?
Overflow-x is bad idea, because everything else will be broken.
Thanks
You need 30px width difference because you have 15px padding left and right, so that means there are two possible solutions:
#media (min-width: 1265px)
.container {
width: 1235px;
}
#media (min-width: 1295px)
.container {
width: 1265px;
}