On my website https://www.nologo.surf/order-online/ the theme is the Uncode in Wordpress.
And i cant center the iframes...
In this Link: https://www.nologo.surf/order-online/
The iframe arent center and are not full...
And here: https://www.nologo.surf/twin/ on 360º image isnt center...
Can you help me?
Thnaks
Just use simple CSS for this iframe
iframe {
display: block;
margin: 0 auto;
}
For center 360º image add this (or like inline style):
#threesixty-slider-1889_HIg3ll {
display: inline-block;
}
Related
White Space on Wordpress website to the right when switching to rtl in elementor specific pages
Here is webpage :
site url
tried
html, body {
overflow-x: hidden;
}
but not working
Try adding this to your CSS:
.rtl .elementor-top-section {
left: 0 !important;
width: auto !important;
}
I'm having trouble centering the top menu of a template, someone could give me a hint of what I do?
The template: http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/dashboard.html
(Need to change the config in right icon to top menu)
Image explanation
I tried to change float: left without success, text-align in 'li' without success...
Thanks.
We have no access to your code to be sure, but try to add that to your css
.navbar-nav {
width: 100%;
text-align: center;
> li {
float: none;
display: inline-block;
}
}
it should work, but let me know
I have a Wordpress site with some galleries with quadrangular photos but I want them to be rectangular to users see the entire photo. I changed the values (height in particular) but when I do that the image stretches and I can't find the way to resolve that problem. I'm still a little newbie in CSS so anyone can help me? It's seems to be a easy thing but unfortunately I can't do.
Here is the gallery: http://cp58.webserver.pt/~httpfash/kids/
All the images have the same size.
Some of the code:
bootstrap-light.min.css
.img-responsive {display:block;max-width:100%;height:242px}
.models li a img {
width:100%;
I used firebug to find that.
.models li a img {
width: 100%;
height: auto !important;
}
Always use height auto for responsive images
img {
width: 100%;
height: auto !important;
}
I have an iframe inside a div like this:
<section>
<div>
<iframe></iframe>
</div>
</section>
the iframe contains a youtube video in flash but that probably won't matter in this case.
I'm building a mosaic and is therfore trying to use the div to crop the iframe to an appropriate size.
this is done by
.section
{height: 251px;
width: 198px;
overflow: hidden}
Works great but I would like to center the video aswell. For images, I add them as background-images and use
background-size: cover
to center them. This is neat because they automatically rescale to maximum possible size. However this doesn't work for video. I would settle for simply centering the iframe vertically and horizontally, if possible.
Will adding this to your css help? It works if div is bigger than section.
section div {
margin-top:-50%;
margin-left:-50%;
}
http://jsfiddle.net/hvCXm/
Wrappping the iframe and use text-align: center; to align horizontal center
div {
text-align: center;
display: block;
}
or
iframe {
margin: 0 auto;
display: block;
}
Try:
iframe {
margin:0 auto;
}
The standard way to center block elements:
iframe {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to move a slideshow downwards on a theme but cannot identify the CSS tag to do so, when I type the following css it pushes the image but not the actual slideshow position:
.newcastle-carousel img {
margin-top: 100px;
}
Hope you can help.
You were close... Add the margin to the parent div, not just the img...
.newcastle-carousel-wrapper{
margin-top: 100px;
}
.newcastle-carousel-wrapper {
margin-top: 100px;
}