Themeover » All Posts https://themeover.com/forum/feed/ Thu, 28 Mar 2024 19:08:11 +0000 https://bbpress.org/?v=2.6.9 en-US https://themeover.com/forum/topic/products-gap/#post-14874 <![CDATA[Reply To: products gap]]> https://themeover.com/forum/topic/products-gap/#post-14874 Thu, 07 Mar 2024 17:48:01 +0000 Sebastian Excellent, thanks for confirming.

]]>
https://themeover.com/forum/topic/products-gap/#post-14873 <![CDATA[Reply To: products gap]]> https://themeover.com/forum/topic/products-gap/#post-14873 Wed, 06 Mar 2024 20:52:13 +0000 Mohammadreza it works perfectly thanks alot

]]>
https://themeover.com/forum/topic/products-gap/#post-14872 <![CDATA[Reply To: products gap]]> https://themeover.com/forum/topic/products-gap/#post-14872 Wed, 06 Mar 2024 11:20:46 +0000 Sebastian Thanks for that. So if you like to work directly with code, I recommend removing the current code shown in your screenshot and replacing it with:

.columns-4 {
	display: grid;
	column-gap: 2px;
	row-gap: 2px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto;
}

The following screenshot shows how this code should layout the items:

CSS grid for 4 columns

The following screenshot shows how to create this layout using the drag and drop CSS grid controls:

Microthemer CSS grid controls

If this doesn’t work for some reason, you may need to make sure you are targeting the direct parent of the items you want in a grid (rather than a higher up parent). That’s because CSS grid alignment only applies to direct child elements.

Let me know if this helps!

Cheers,
Sebastian

]]>
https://themeover.com/forum/topic/products-gap/#post-14868 <![CDATA[Reply To: products gap]]> https://themeover.com/forum/topic/products-gap/#post-14868 Wed, 06 Mar 2024 10:50:06 +0000 Mohammadreza i upload it in several uploadcenter

https://i.postimg.cc/h42652hX/Screenshot-2024-03-05-170241.png
https://freeimage.host/i/JV5cqN9
https://imgtr.ee/image/I8H3KW
https://bashify.io/i/Me6bSq_screenshot_2024_03_05_170241

thanks

]]>
https://themeover.com/forum/topic/products-gap/#post-14867 <![CDATA[Reply To: products gap]]> https://themeover.com/forum/topic/products-gap/#post-14867 Wed, 06 Mar 2024 10:21:31 +0000 Sebastian Hey Mohammad,

I couldn’t open the image file. It says it’s been deleted. However, when it comes to troubleshooting CSS issues, a link to the page you’re working on is much more useful because it allows me to view the HTML and existing CSS rules, and then provide very specific advice on what you need to do.

You can send the link privately via my contact form if you prefer.

If the site isn’t online yet, I can try to guess at what’s going on from your description. It may be that the current layout is using float or flexbox with flex-wrap set to wrap. So instead, use Microthemer’s CSS grid options to set a 4 column grid on the element with the class “columns-4”. If you use the drag and drop grid controls, this should set “display: grid” and set the column widths to “1fr”. That way, the items should not wrap over multiple rows. Instead, they should shrink to fit the available space.

Without viewing the page, I can’t really say for sure what’s going on though.

Cheers,
Sebastian

]]>