• Resolved johannes999

    (@johannes999)


    hello,

    I have been about 2 hours busy to solve this problem .

    I have tried every possible situation but the problem still exists.

    in media query min 180px to 320px.

    this is the html code :

      <div id="info-container3">
          <div class="title">
    		  
    		  <h2> 	Davids   </h2>
    	      <p>   APK & Auto Service
    			  </p>       </div>	  
    		                      
    			  </div>
    		<div class="description">auto reparatie service</div>
    		<div class="tekst">hello</div>
    		</div>
    		
    		</div>
    			  
    			
     
    

    and this is css:

    #info-container3 {
    	
    	border:0.01 solid #4b5054;
    	 background-color:#4b5054; 
    	width:100%;
    	height:70px;
    	margin-top:0;
    	display:flex;
    	flex-direction:row;
    }
    
    	#info-container3 .title {
    	 width:66.666%;	
    	align-items:center;
    	margin-left:4%;
    	display:flex;
    	justify-content:flex-start;
    		flex-direction:row;
      
    }
    #info-container3 .title h2{      
    	font-size:1rem;
    	font-weight:bold;
    	color:white;
    	text-align:center; 
      position:relative;
    	
    }
    #info-container3 .title p {
    font-size:14px;
    color:greenyellow;
    margin-top:-2px;
    margin-left:12%;
    font-family: 'Ravi Prakash', cursive;
    position:absolute;
    	
    }
    
    
    .description{
    	
    visibility:hidden;	
    display:none;
    
    
    }
    
    .tekst{
     visibility:hidden;
    	display:none;
    	
    
    }  
    
    	#hello {
    		
    		display:none;
    	}

    when you go to my homepage and open inspect element and go to media query between 180 to 319.999 px you can see that the text upon title(David) is not in the same line which has to be in the same line (apk & auto service)

    has to be on the same line.

    how I can solve this problem.

    I set for ( #info-container3 .title p ) position absolute but it didn’t help!

    I am using media query between 180 and 320 px for learning purpose

    thanks

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • If you’re referring to the text “APK & Auto Service”, this is in a <p> tag, and the width is restricted to just 25% by the following code in style1.css file in your theme folder:

    .title p {
        display: flex;
        width: 25%;
        font-size: 1.4rem;
        color: #ffd978;
        margin-top: -10px;
        margin-left: -20px;
        font-family: 'Ravi Prakash', cursive;
        position: absolute;
    }
    Thread Starter johannes999

    (@johannes999)

    thank you very much,

    I saw it as an amateur I couldn’t think about it .

    thanks again

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘in media query 180-320px the text upon title is not coming on the same line?’ is closed to new replies.