Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Forcing 2 Blocks Into The Same Row On Mobile Help Rate Topic   - - - - -

 

Posted 30 April 2019 - 08:21 AM #1

Hi all,

 

I was wondering if anyone knew how to make 2 blocks appear on the same line when my site is displaying on mobile.

 

I am using the Simtech Hamburger menu addon as a block and the normal search box as another block in the same grid. 

 

The Hamburger menu is set to display on mobile only but sits above the search box on mobile.

 

Is there any way to force the menu to sit on the same row as the search box?

 

Please see screenshots for reference and as always any help would be appreciated!

 

Thanks

Attached Thumbnails

  • Existing Layout.png
  • Desired Layout.png


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19158 posts

Posted 30 April 2019 - 01:43 PM #2

Please PM me store access key. We will try to help you


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 

Posted 02 May 2019 - 07:30 AM #3

I have sent this to you as a PM. Thank you for offering to help!



 

Posted 03 May 2019 - 09:31 AM #4

This is the current layout. The main menu is hidden on mobile and the hamburger menu is hidden on desktop and tablet. 

 

With the Hamburger menu and search sharing a grid i was hoping they would display side by side but that does not seem to be the case!

 

Attached Thumbnails

  • Layout.JPG


 
  • alaa
  • Advanced Member
  • Members
  • Join Date: 18-Mar 18
  • 132 posts

Posted 04 May 2019 - 10:52 AM #5

This is the current layout. The main menu is hidden on mobile and the hamburger menu is hidden on desktop and tablet. 

 

With the Hamburger menu and search sharing a grid i was hoping they would display side by side but that does not seem to be the case!

 

Let me know your site URL. I will try to fix this in CSS. 



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19158 posts

Posted 04 May 2019 - 01:34 PM #6

I see this

 

http://prntscr.com/nkb9u0

 

Do you want to place My account and My cart blocks on one line?


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 

Posted 07 May 2019 - 09:29 AM #7

Thank you for the replies.

 

Ecom Labs - If you try and preview the page on a desktop, even in mobile view it does not display the correct blocks which is why it looks like that.

 

So the hamburger menu and the search block share a grid. The hamburger menu is set to display on mobile only.

 

I have managed to get the search bar onto the same line as the hamburger menu by assigning each block with display: inline-block; in css. I then simply set the search block to a width of 85% to ensure space on the line for the hamburger menu. 

 

I have attached a screenshot of the results. I am pleased with this as when i asked CS-Cart direct i was told it would require paid modifications to achieve.

 

Thanks to everyone for the replies!

 

 

Attached Thumbnails

  • Screenshot_20190507-102333.png


 
  • ankita
  • Member
  • Trial users
  • Join Date: 19-May 16
  • 20 posts

Posted 09 May 2019 - 04:48 AM #8

Hi,

Perhaps you can also achieve this by changing your grid setting and adding a new grid parallel to search and adding humburger block into that grid. This way instead of looking on top of search your humburger layout looks in parallel and same will replicate on frontend too. https://prnt.sc/nma637 



 

Posted 09 May 2019 - 08:43 AM #9

Hi ankita,

 

Thanks for the suggestion. I did try this but the search block seems to fill the row anyway. 

 

So the hamburger menu was forced above the search and the cart content block was forced below. 



 
  • ankita
  • Member
  • Trial users
  • Join Date: 19-May 16
  • 20 posts

Posted 09 May 2019 - 09:40 AM #10

Hi,

Please make sure that total sum of your grid division must be 16. See in my screenshot it is 3+3+10. Then in the grid of 10 if have to divide my blocks as per my choice like in 2,3,1 and so no but the total must be of 10. If you maintain this situation it will be in a row as you wanted.