Ratings – css broken

This topic contains 4 replies, has 2 voices, and was last updated by  cyril lansade 7 years, 3 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: 

  • Author
    Posts
  • December 30, 2016 at 1:51 am #333296

    cyril lansade
    Expired Member
    Post count: 150

    Hi,

    When viewing user ratings on small screens, especially when nested, the individual rating header breaks. The time stamp gets hidden by the buttons and it starts looking messy pretty quickly. See attached.

    Is this something you will fix in the future? Is there a workaround you can thing off for the entire heading?

    Thanks!

    December 30, 2016 at 9:27 am #333356

    Giri
    Expired Member
    Post count: 3155

    Hi Cyril,

    Can you try adding this code in custom css.

    

    
@media (max-width: 768px) {
  #reviewsTab #comments .comment-links,
  .wpl_reviews #comments .comment-links,
  .gdbp-wrapper-reviews #comments .comment-links {
    overflow: hidden;
    width: auto;
    text-align: right;
    position: relative;
    top: auto;
    right: auto;
  }
  #reviewsTab #comments .comment-content,
  .wpl_reviews #comments .comment-content,
  .gdbp-wrapper-reviews #comments .comment-content {
    margin-left: 0;
  }
  #reviewsTab #comments ol.commentlist ol.children .comment-content,
  .wpl_reviews #comments ol.commentlist ol.children .comment-content,
  .gdbp-wrapper-reviews #comments ol.commentlist ol.children .comment-content {
    margin-top: 0;
  }
}
    

		
	
    


    

			
				

    

	
    

		December 31, 2016 at 3:35 am

		
		#334001

		
		
		
	
    


    


    

	
    

		
		
    cyril lansade
    Expired Member
    
		
		
     Post count: 150
    
	
    

	
    

		
		
    Yes that does work.
    

    Is there a way to move the timestamp to the next line as it would be a bit neater?
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		January 2, 2017 at 9:35 am

		
		#335194

		
		
		
	
    


    


    

	
    

		
		
    Giri
    Expired Member
    
		
		
     Post count: 3155
    
	
    

	
    

		
		
    Hi Cyril,
    

    Try this code.
    

    

    #reviewsTab #comments article header time, .wpl_reviews #comments article header time, .gdbp-wrapper-reviews #comments article header time {
    display: block;
    width: 70%;
    margin-top: 5px;
}
    

		
	
    


    

			
				

    

	
    

		January 28, 2017 at 5:03 am

		
		#351028

		
		
		
	
    


    


    

	
    

		
		
    cyril lansade
    Expired Member
    
		
		
     Post count: 150
    
	
    

	
    

		
		
    Hello,
    

    I ended up using the following as if the username is very short having the width on the time means it doesn’t always move to the next line.
    

    /*User reviews – giving the cite a specific width so the time goes on next line*/
    
#reviewsTab #comments article header cite, .wpl_reviews #comments article header cite, .gdbp-wrapper-reviews #comments article header cite {
    
    width: 70%;
    
}
    

    /*User reviews – moving the time stamp below the user name*/
    
#reviewsTab #comments article header time, .wpl_reviews #comments article header time, .gdbp-wrapper-reviews #comments article header time {
    
    display: block;
    
    margin-top: 10px;
    
}
    

    Thanks for the help!
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 5 posts - 1 through 5 (of 5 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket