Post by ShorePatrol » Wed Apr 17, 2019 8:24 am

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?
Last edited by ShorePatrol on Sat Apr 20, 2019 3:26 am, edited 2 times in total.

Newbie

Posts

Joined
Tue Jul 03, 2018 2:11 am

Post by IP_CAM » Wed Apr 17, 2019 10:36 am

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. :D
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">
footer.tpl / footer.twig Section:

Code: Select all

</div>
</body> 
Stylesheet.css Boxed Section:
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);
}
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

I am no longer active at the OC Forum, to reach me, contact: jti@jacob.ch
My latest free Opencart LIGHT 1.5.6.5 Source is available on demand: http://www.opencart.li/dark/
900+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by ShorePatrol » Wed Apr 17, 2019 7:08 pm

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.

Newbie

Posts

Joined
Tue Jul 03, 2018 2:11 am

Post by IP_CAM » Thu Apr 18, 2019 2:22 am

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

I am no longer active at the OC Forum, to reach me, contact: jti@jacob.ch
My latest free Opencart LIGHT 1.5.6.5 Source is available on demand: http://www.opencart.li/dark/
900+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by ShorePatrol » Thu Apr 18, 2019 7:37 am

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
Last edited by ShorePatrol on Sat Apr 20, 2019 3:26 am, edited 1 time in total.

Newbie

Posts

Joined
Tue Jul 03, 2018 2:11 am

Post by IP_CAM » Thu Apr 18, 2019 9:44 am

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
---
Image

Attachments

printscreen.jpg

printscreen.jpg (49.99 KiB) Viewed 202 times


I am no longer active at the OC Forum, to reach me, contact: jti@jacob.ch
My latest free Opencart LIGHT 1.5.6.5 Source is available on demand: http://www.opencart.li/dark/
900+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by ShorePatrol » Thu Apr 18, 2019 6:27 pm

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.

Newbie

Posts

Joined
Tue Jul 03, 2018 2:11 am

Post by paulfeakins » Thu Apr 18, 2019 6:53 pm

ShorePatrol wrote:
Thu Apr 18, 2019 6:27 pm
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?

For quick, professional OpenCart support please email info@antropy.co.uk


User avatar
Expert Member

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - Reigate, Surrey, United Kingdom

Post by ShorePatrol » Fri Apr 19, 2019 2:25 am

<link removed>
Last edited by ShorePatrol on Sat Apr 20, 2019 3:27 am, edited 1 time in total.

Newbie

Posts

Joined
Tue Jul 03, 2018 2:11 am

Post by IP_CAM » Fri Apr 19, 2019 4:11 am

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

I am no longer active at the OC Forum, to reach me, contact: jti@jacob.ch
My latest free Opencart LIGHT 1.5.6.5 Source is available on demand: http://www.opencart.li/dark/
900+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by ShorePatrol » Fri Apr 19, 2019 9:03 am

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

Newbie

Posts

Joined
Tue Jul 03, 2018 2:11 am

Post by IP_CAM » Fri Apr 19, 2019 9:39 am

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

I am no longer active at the OC Forum, to reach me, contact: jti@jacob.ch
My latest free Opencart LIGHT 1.5.6.5 Source is available on demand: http://www.opencart.li/dark/
900+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by ShorePatrol » Fri Apr 19, 2019 6:47 pm

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?

Newbie

Posts

Joined
Tue Jul 03, 2018 2:11 am

Post by IP_CAM » Fri Apr 19, 2019 8:14 pm

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

I am no longer active at the OC Forum, to reach me, contact: jti@jacob.ch
My latest free Opencart LIGHT 1.5.6.5 Source is available on demand: http://www.opencart.li/dark/
900+ FREE OC Extension-Repositories - from OC v.1.5.x up, on the
world's largest OC-related Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Who is online

Users browsing this forum: No registered users and 26 guests