in MQ the text is moving down when I go little higher in pixels?

  • Resolved johannes999

    (@johannes999)


    1 year, 2 months ago

    Hallo,

    I give only 1 section code of the page to make it easy.

    this is html code:

    <section id="portfolio">
<div class="portfolio-section-left-side">
<h3>WebdesignMaster: Uw Digitale Identiteit:</h3>
<h4>Welkom bij WebdesignMaster, uw partner in het cre?ren van digitale meesterwerken. Als creatieve geest endigitale identiteit.</h4>
</div>
<div class="portfolio-section-right-side"><img src="https://webdesignmaster.info/wp-content/uploads/2023/09/portfolio-section-image.webp" width="1080" height="550" alt="Website bouwen in Rotterdam"></div>
</section>

    this is the css code:

    

      #portfolio {
    display: flex;
    flex-direction: row;
    width: 100%;
	 max-width:1240px;
	  justify-content:center;
	  margin-left:auto;
	  margin-right:auto;
  }

  

  .portfolio-section-left-side {
	width: 45%;
	 max-width:558px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  
 
  }

  .portfolio-section-left-side h3 {
    margin-top:0.5rem;
  }

  .portfolio-section-left-side h4 {
    margin-top: 0.25rem;
  }

  .portfolio-section-right-side {  
	  display: flex;    
    justify-content: flex-end;
	 width:45%;
	 max-width:558px;
	  margin-left:2%;
  }

  .portfolio-section-right-side img {
    width: 100%;
    height: auto;
    max-height: 350px;
    margin-top: 2rem;
  }

    when you open this code under 1082 pixels the text line is equal to the image . but when you go up to 1280pixels then the text is going down it is not staying stable. for this reason I used % and pixels in my code.

    in the begin I was only using % .but when I opened it on 1081 the text position was good. but when I move to up 1280 pixels the text is moving to down . I know in this situation is normal because I was using %. then I tried to use only pixels.

    like this example :

    #portfolio{
    display: flex;
    flex-direction: row;
	width:100%;
	max-width:1200px;
	justify-content:center;
	margin-left:auto;
	margin-right:auto;
     
  }

    (the numbers above is an example ).

    then the margin right and left became wider as the resolution moved from 1081 to 1280 px. and it is coming very ugly?

    I want to know if there is some solution that the text stays stable in line with the image when I move from 1082 pixels to 1280 pixels? or from 1280 to 1560 pixels .

    I don’t know if is possible to use position absolute ? I tried but it didn’t work.

    how I can solve this problem?

    thanks

    • This topic was modified 1 year, 2 months ago by johannes999.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    There are CSS media queries that cause this behavior. For example:

    @media (min-width: 681px) and (max-width: 1080.09px)
.portfolio-section-left-side {
    width: 92%;
    margin: 0 4%;
}

    It’s typical in responsive design for side by side elements to switch to vertical stack as screens get narrower. You don’t want elements so narrow that there’s barely room for single words on each line. If you feel 1080.09px is too wide to transition to vertical stack, you could change the max-width: value to something smaller. Be sure to alter all similar max-width: values so behavior remains consistent.

    Also look for min-width: 1081px values just like there are max-width: 680.09px media queries corresponding to the min-width: 681px value. The 681 width manages when side margins are removed when screen widths get really narrow. The various media query breakpoints must always be coordinated.

    Thread Starter johannes999

    (@johannes999)

    thanks ,

    for the advice

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘in MQ the text is moving down when I go little higher in pixels?’ is closed to new replies.