My code is working, I've been trying to figure out how to set the IonCol side to side instead of stack, it is responsive but the columns don't move, they stretch, any ideas how I could fix this?

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader translucent={true}>
        <IonToolbar color="danger">
          <IonTitle>Portfolio</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <div id="container">
          <IonGrid>
            <IonRow>
              <IonCol size-xs="12" size-md="4">
                <img src="https://images.unsplash.com/photo-1425421669292-0c3da3b8f529?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80" />
              </IonCol>
              <IonCol size-xs="12" size-md="8">
                <div>
                  <h1>Batman</h1>
                  <h5>
                    <strong>The Knight</strong>
                  </h5>
                </div>
              </IonCol>
            </IonRow>
          </IonGrid>

          <IonGrid>
            <IonRow>
              <IonCol size-xs="12" size-md="12">
                <h2>About</h2>
                <p>
                  Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                  Deleniti facilis at nostrum modi ex aspernatur reiciendis
                  repellat? A beatae quo fugit est perferendis nobis optio
                  aliquid rem et blanditiis qui, asperiores molestias iste earum
                  neque consequatur placeat accusantium quos! Deserunt corrupti
                  vel minima asperiores. Quo molestias inventore sapiente
                  recusandae aliquam?
                </p>
              </IonCol>
            </IonRow>
          </IonGrid>

          <div id="container">
          <IonGrid>
            <IonRow>
              <IonCol size='8'>
                <h1>Work Experience</h1>
              </IonCol>

            <IonCol size="8">
                <IonAccordionGroup>
                  <IonAccordion value="first">
                    <IonItem slot="header" color="light">
                      <IonLabel>Head of technology, Avengers</IonLabel>
                    </IonItem>
                    <div className="ion-padding" slot="content">
                      <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. Harum, quod!
                      </p>
                    </div>
                  </IonAccordion>
                  <IonAccordion value="second">
                    <IonItem slot="header" color="light">
                      <IonLabel>CEO, Stark Industries</IonLabel>
                    </IonItem>
                    <div className="ion-padding" slot="content">
                      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                      Sit eveniet libero doloribus!
                    </div>
                  </IonAccordion>
                  <IonAccordion value="third">
                    <IonItem slot="header" color="light">
                      <IonLabel>CFO, IBM</IonLabel>
                    </IonItem>
                    <div className="ion-padding" slot="content">
                      Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                      Fugiat nesciunt voluptatibus saepe provident.
                    </div>
                  </IonAccordion>
                </IonAccordionGroup>
              </IonCol>
            </IonRow>
          </IonGrid>
          </div>

          <div id="container">
          <IonGrid>
            <IonRow>
              <IonCol size="12">
                <IonList>
                  <IonItem>
                    <h2>Technical Experience</h2>
                  </IonItem>

                  <IonGrid>
                    <IonRow>
                      <IonCol size='12'>
                      <IonItem>
                    <IonList>
                      <IonLabel>Java</IonLabel>
                    </IonList>
                    </IonItem>
                      </IonCol>
                    </IonRow>
                  </IonGrid>
                  
                  
                  <IonItem>
                    <IonLabel>Javascript</IonLabel>
                  </IonItem>
                  <IonItem>
                    <IonLabel>React</IonLabel>
                  </IonItem>
                  <IonItem>
                    <IonLabel>NodeJs</IonLabel>
                  </IonItem>
                  <IonItem>
                    <IonLabel>Python</IonLabel>
                  </IonItem>
                </IonList>
              </IonCol>
            </IonRow>
          </IonGrid>
          </div>
          </div>
        <IonFooter>
          <IonToolbar>
            <IonButton expand="full">
              Tel. 123-456-88888 | [email protected]
            </IonButton>
          </IonToolbar>
        </IonFooter>
      </IonContent>
    </IonPage>
  );
};

export default Home;

I tried setting different size-xs='4', size-md='8', just size='4' and size='8', putting it under the IonGrid but no success.

The column that says Work experience and its elements needs to be next to technical experience once the windows maximizes... responsive...

CodePudding user response：

You are having them in different grids, the would align vertically. if you want some IonCols to stand horizontally, they should be in the same IonGrid and their combined size should be less than 12, otherwise it would go to next line because the size system divide a row into 12 units. something like this:

<IonGrid>
    <IonRow>
        <IonCol>
            <h1>Work Experience</h1>
        </IonCol>
        <IonCol>
            <IonList>
                <IonItem>
                    <h2>Technical Experience</h2>
                </IonItem>
                ...
            </IonList>
        </IonCol>
    </IonRow>
</IonGrid>

Also size is not an attribute of IonGrid, it is for IonCol. if you want your grid's width to be limited, you can should fix it in css and probably use css grid or flexbox etc.