Center between left side fixed item...

User 3005954 Photo


Registered User
2 posts

How can I center elements between a Fixed Items on the left side and end of viewing window on the right side. I tried many things and just could not get it to work.
Here is an example on the website below.
https://smoothies.kotobee.com/#/reader/chapter/4?vi=0
Theirs are not perfectly centered but is pretty close.

What I have so far is below is attached
Attachments:
User 122279 Photo


Senior Advisor
13,696 posts
Online Now

Hi,

Do I understand you correctly in that you want to kind of replicate the look of that strawberry thingie? Then you'll now learn the first rule (haha!) about posting something of your own asking for help:

Don't post a picture, post your project file (SD file). Zip it before posting, or, if it is too large, pop it in a dropbox or similar and post the link.

The reason for this is, that most things can be achieved in several ways, and to be able to give some relevant advice and help, we need to see what you have done so far.

In general, you centre an image horizontally by giving it left and right margins of 'auto'. Also, check that it is set to display 'block'.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,230 posts

To attach an RSD file to a post in this forum, it needs to be in a zip file. As Inger says, that makes it much easier to be sure one has a clear understanding of the problem.

If I understood correctly, the problem was the fixed positioning of the item at the left. If that is so, perhaps something like the attached might do the trick.

I did the following -
1. I created a container element with a margin-left identical to the width of the fixed-position picture.
2. I set that container to flex - row - justify:center.
3. I put the item for centering into that flex container.

Frank
Attachments:
User 2699991 Photo


Registered User
3,656 posts
Online Now

It would also help a great dea;, if you mention the framework you are using
FOUNDATION
BOOTSTRAP: 3 or 4
MATERIALIZE
FRAMEWORKLESS: Desktop down or Mobile first

whilst generally, each framework would be similar but each requires a slightly different approach and solution, especially for the MOBILE FIRST viewport


The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2699991 Photo


Registered User
3,656 posts
Online Now

Wayan Jaya wrote:
It would also help a great dea;, if you mention the framework you are using
FOUNDATION
BOOTSTRAP: 3 or 4
MATERIALIZE
FRAMEWORKLESS: Desktop down or Mobile first

whilst generally, each framework would be similar but each requires a slightly different approach and solution, especially for the MOBILE FIRST viewport



I made something in the FOUNDATION SD 3.5 version along the lines of what you may be trying for a few years ago for a site that was for some sort of superfood thingy It was also a sort of E-Commerce site but with quite a bit of information added about the products. It's not exactly the same as the site you placed a link to but might be close.

I have sort of adapted it a bit by putting some Images in more relevant.
I made it in the foundation framework, but I think it could also be achieved in Bootstrap (although I don't really do Bootstrap)

There is a silent movie demo here (family still in the land of NOD)

https://youtu.be/Q4go_VJAI5s

If it's not what you are thinking of, then no worries. Should you think it might suffice, then I could make a How-To Video, but be aware it is quite a complicated process, not for the faint of hrart.


The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.