I'm guess this has something to do with CSS media queries...? When I stretch the browser wider than 1200 pixels, I can see the breakpoint change the page layout, and everything looks good except the image in the slideshow are slightly to the left of center.
Any thoughts?
Default Banner Size must be made equal to the largest visual appearance,
since Bootstrap does not blow up images, but only reduces them in Size.
And Bootstrap starts it all from the left side.
If you have a Theme Setup, allowing full width screen up to 2000px width,
a Banner might need to be sized to about 1980px width, to match troughout
the entire range of resolution sizes.
If smaller sized Banners are used, and one only enlarges an image by manually
setting larger sizes, the quality of such images will be reduced substantially.
I therefore advise users, to better BOX a Layout, i.E. to max 1400px width, then,
one does not require super-large Images, heavy on data, and so only slowing
down overall performance. And many Layouts do not look great in too wide
sizes anyway ...
Ernie
header.tpl / header.twig Section:
footer.tpl / footer.twig Section:
Stylesheet.css Boxed Section:
max-width: VALUE
Boxed Layout by viethemes Sample, to show, how such can be done by OcMod/VqMod:
https://www.opencart.com/index.php?rout ... n_id=20591
since Bootstrap does not blow up images, but only reduces them in Size.
And Bootstrap starts it all from the left side.
If you have a Theme Setup, allowing full width screen up to 2000px width,
a Banner might need to be sized to about 1980px width, to match troughout
the entire range of resolution sizes.
If smaller sized Banners are used, and one only enlarges an image by manually
setting larger sizes, the quality of such images will be reduced substantially.
I therefore advise users, to better BOX a Layout, i.E. to max 1400px width, then,
one does not require super-large Images, heavy on data, and so only slowing
down overall performance. And many Layouts do not look great in too wide
sizes anyway ...
Ernie
header.tpl / header.twig Section:
Code: Select all
</head>
<body>
<div class="boxed">Code: Select all
</div>
</body> max-width: VALUE
Code: Select all
.boxed {
max-width: 1400px;
margin: 20px auto;
background-color: #fff;
-webkit-box-shadow: 0px 0px 20px -1px rgba(133,133,133,1);
-moz-box-shadow: 0px 0px 20px -1px rgba(133,133,133,1);
box-shadow: 0px 0px 20px -1px rgba(133,133,133,1);
}https://www.opencart.com/index.php?rout ... n_id=20591
My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
Thanks...one question:
1) The off-center image shows at the 1200 breakpoint - so between 1200 and the max 1400 width it will still be off-center won't it?
Thanks for your help.
1) The off-center image shows at the 1200 breakpoint - so between 1200 and the max 1400 width it will still be off-center won't it?
Thanks for your help.
An image will stay off center left, when it reaches it's default width,
but so does not match a larger Layout-given Width anymore.
Ernie
but so does not match a larger Layout-given Width anymore.
Ernie
My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
Not sure I understand your reply....the whole page looks fine, EXCEPT for the image in the slider (off center to the left)
The DIV around the entire site doesn't work. Hopefully someone knows how to fix this...
Thanks
The DIV around the entire site doesn't work. Hopefully someone knows how to fix this...
Thanks
Last edited by ShorePatrol on Sat Apr 20, 2019 3:26 am, edited 1 time in total.
You don't need to show that Image, show Facts!
A Site URL would do, or then at least a Print Screen, containing anything
of real Value, or it makes no sense.
Ernie
---
A Site URL would do, or then at least a Print Screen, containing anything
of real Value, or it makes no sense.
Ernie
---
My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
What do you mean it makes no sense? It shows the slideshow, with the image off center. That's the problem. The rest of the page is fine.
I think post the site URL if you can?ShorePatrol wrote: ↑Thu Apr 18, 2019 6:27 pmWhat do you mean it makes no sense? It shows the slideshow, with the image off center. That's the problem. The rest of the page is fine.
UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
<link removed>
Last edited by ShorePatrol on Sat Apr 20, 2019 3:27 am, edited 1 time in total.
As I mentioned already, the Banner is only 1000px in width, and so not
sufficient to make it be placed in the middle with 1200px Sized Resolution View.
Ernie
sufficient to make it be placed in the middle with 1200px Sized Resolution View.
Ernie
My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
Isn't there a way to fix this with CSS? Like allow the slider to go to 1200?
This seems like an odd problem to have "out of the box". Sorry if I don't understand everything your saying. I'm familiar with CSS and web design, but just learning opencart and how to update things....
I guess I'll try to figure it out with CSS.
Thanks
This seems like an odd problem to have "out of the box". Sorry if I don't understand everything your saying. I'm familiar with CSS and web design, but just learning opencart and how to update things....
I guess I'll try to figure it out with CSS.
Thanks
Well, one last try:
if you have a Box, 1200 millimeters long, and you want to place
a Chocolate into that box, exactly matching the Box Width, you
have to size that Chocolate to about 1190 millimeters, or it will
not fill up the open Space.
And you're trying to place a 1000 millimeter sized Image into a 1200
millimeter box, and expect it to stay in the Middle of the Box, regardless
of the visual display size, leaving the same Space on the left + right side.
But this is not possible, because Bootstrap Theme Build is not 'defined'
on 'absolute' Values, but starts to count from LEFT, because such 'Values'
all have to be 're-calculated', depending on the resolution of a User Screen.
It's as easy as that, accept it or not ! ( simply explained, kind of ... )
Good Luck!
Ernie
if you have a Box, 1200 millimeters long, and you want to place
a Chocolate into that box, exactly matching the Box Width, you
have to size that Chocolate to about 1190 millimeters, or it will
not fill up the open Space.
And you're trying to place a 1000 millimeter sized Image into a 1200
millimeter box, and expect it to stay in the Middle of the Box, regardless
of the visual display size, leaving the same Space on the left + right side.
But this is not possible, because Bootstrap Theme Build is not 'defined'
on 'absolute' Values, but starts to count from LEFT, because such 'Values'
all have to be 're-calculated', depending on the resolution of a User Screen.
It's as easy as that, accept it or not ! ( simply explained, kind of ... )
Good Luck!
Ernie
My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
I understand what's happening - I am asking for a solution - so to resolve this, I can make all the images in the slider sized to 1200px. Is that correct?
Basically YES. At least, if 1200px is the (boxed) MAX WIDTH of your Layout.
And if not, Banners need to be created even larger, to match to largest
possible Screen Resolution.
Good Luck!
Ernie
And if not, Banners need to be created even larger, to match to largest
possible Screen Resolution.
Good Luck!
Ernie
My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
Who is online
Users browsing this forum: Bing [Bot], openalvin, SelfSus, softmonke, systemmaker, tilly and 521 guests
