Ensure that all content stays on a single line regardless of the phone's screen size

I have successfully implemented a hamburger mobile menu, but I encountered issues when trying to include contact information within the menu.

After experimenting with two different approaches, I found that the first method worked on all devices except iPhones and those mainly using Safari. In those cases, the text line would break causing a formatting issue.

This first approach also required the use of media queries. Interestingly, the layout appeared fine when inspected on a desktop, but on actual phone devices, the text line broke into two after the icons.

Below is the source code for this approach:

<div class="elementor-widget-container">
  <div class="elementor-text-editor elementor-clearfix">
    <p class="makeSmall" style="text-align: center;">
      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1aca0b8a081aca0b8a0a3a0b3a3a4b3efa2aeefa8ad">[email protected]</a>">
        <img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33">&nbsp;</a>
      <a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|</label></a>&nbsp;<span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643">&nbsp;052-6582643</a></span></p>
  </div>
</div>

Although the second approach I tried had some success, the icons appeared smaller than the defined pixel size, resulting in a messy overall appearance.

<div class="elementor-text-editor elementor-clearfix elementor-inline-editing" data-elementor-setting-key="editor" data-elementor-inline-editing-toolbar="advanced">
  <p class="makeSmall" style="text-align: center;">
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d505c445c7d505c445c5f5c4f5f584f135e52135451">[email protected]</a>">
      <img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33">&nbsp;</a>
    <a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33">&nbsp;<label style="color: #61f6ff;" data-mce-fragment="1">|</label></a>&nbsp;<span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643">&nbsp;052-6582643</a></span></p>
</div>

CSS code:

.mobilemenucontact {
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: inline-block;
}

#mobilemenucontact {
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: inline-block;
}

@media only screen and (max-width: 375px) {
  .makeSmall {
    font-size: 95%;
  }
}

@media only screen and (max-width: 375px) {
  .email-mobile {
    width: 28px;
  }
}

@media only screen and (max-width: 375px) {
  .facebook-mobile {
    width: 28px;
  }
}

@media only screen and (max-width: 375px) {
  .column-contact {
    padding: 5px 30px;
  }
}

.active {
  border-bottom: 2.11px solid #61f6ff;
  padding: 4px;
  box-sizing: border-box;
  margin-bottom: 4px;
}

I'm unsure which approach to choose, as I want the two icons and the phone number to remain on one line regardless of the browser or device used. Additionally, I want the spaces between them to be equal and the icons to be 33px wide.

You can view both approaches on the website www.mayabarber.co.il

If you prefer to provide your own responsive HTML/CSS code, here's an image of how I'd like it to look: https://i.sstatic.net/Es5Gl.png

Thank you!

Answer №1

After reviewing the link provided, it seems that your issue can be resolved by simply including the following CSS in the media screen where you want these changes to take effect.

You may also consider reducing the padding or specifying it in % rather than px.

.elementor-nav-menu a{
   display: inline-flex;
}

I hope this solution proves helpful to you.

Answer №2

Your code seems overly complicated, so I simplified it by creating a list with links and aligning it using flex-box & align-items:center.

.social-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.social-links li {
  padding: 10px 4px;
}

.social-links li.with-separator {
  border-left: 1px solid #61f6ff;
  margin-left: 16px;
  padding-left: 20px;
}

.social-links li img {
  vertical-align: middle;
}

.social-links a {
  text-decoration: none;
  color: #494c4f;
}

@media only screen and (max-width: 375px) {
  .social-links {
    flex-direction: column;
  }
  .social-links li.with-separator {
    border-left: 0;
    border-top: 1px solid #61f6ff;
    margin-left: 0;
    padding-left: 4px;
  }
}
<ul class="social-links">
  <li>
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="066b677f67466b677f67646774646374286569286f6a">[email protected]</a>" class="icon"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"></a>
  </li>
  <li>
    <a href="https://www.facebook.com/mayabarbercontrolcenter/" class="icon"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"></a>
  </li>
  <li class="with-separator"><a href="tel:0526582643">052-6582643</a></li>
  <li class="with-separator"><a href="tel:048201996">04-8201996</a></li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Methods for anchoring an element at the bottom of a square container div

* { box-sizing: border-box; } .publication { display: flex; width: 100%; margin-top: 6%; } .bottom1, .bottom2 { display: flex; flex-direction: column; ...

What impact does reducing the window size have on my header?

While working on a website with a navigation bar, I encountered an issue where the navbar was not responsive. When the window size was reduced, the nav bar shifted to an awkward position vertically, as shown in the first image. The navbar shifts below the ...

Optimizing the If operator in JavaScript to function efficiently without causing the page to reload

While delving into jQuery and attempting to create a slider, I encountered a problem. After the slider passed through the images for the second time, the first image would not appear. My approach involved using margin-left to move the images. $(document ...

posting data and redirecting fails when using an ajax button

I am encountering an issue where I click a button on a page to navigate to another page with posted data, but it is redirecting without posting anything. Both $_POST and $_SESSION variables are empty. Below is my ajax function: function ajax4(Div_Submit, ...

Nest a Div inside another Div with a precise margin of 10 pixels

Recently, I attempted to create a fullscreen webpage like this one: https://i.sstatic.net/21KCr.png My goal was to have the color of each element change randomly every second. Here is the JavaScript code I implemented: <script> var tid = se ...

How can I apply max-width and max-height to a background image?

It seems like a simple task. I am currently transitioning my layout to become more fluid by working on creating scalable images. While using the img tag and setting max-width to 100% is effective, I am considering using a div with the image set as its bac ...

CSS styling for a background image in the header

Why isn't my background image showing up even though I've used a direct link to the image? What could be causing this issue? .header { background-image: url("https://www.africa.com/wp-content/uploads/2015/07/Kenya.jpg"); background-attac ...

How can I modify the border color within a div element?

My journey into web development is just beginning, and I've grasped the basics of Java, JSP, HTML, JS, CSS, and JQ. However, I've hit a roadblock while attempting to change the border color of a div upon mouse hover. Despite my efforts, I haven&a ...

What is the best way to pass a chosen value to php through ajax?

Trying to pass the selected item value from a select tag using AJAX. Here is the select tag (not in a form): <select class="select" id="select"> </select> Code to populate the select from the database using PHP: $(document).ready(function(){ ...

A pop-up window for selecting a file within an <a> tag

Is there a way to create an Open File dialog box on a link within my webpage? I attempted <input name="uploadedfile" type="file"> However, it only functions as a button and does not allow for the selection of multiple files. I would like somethin ...

Mastering the Art of Defining SVG Gradients in a Page-wide CSS File

On my HTML page, I have implemented a JavaScript code that dynamically generates SVG elements and inserts them into the HTML page. Currently, all the styling attributes such as fill colors are specified in the CSS of the entire webpage. This approach allo ...

Creating a jQuery tab plugin that utilizes an external method

Here is a simple tab plugin that I developed. I am looking for suggestions on how to make it easier to switch tabs using an external method. /** * Custom jQuery Tabs Plugin */ (function($) { $.fn.customTabs = function(options) { var default ...

Explore the List feature in Tapestry using jQuery

On the Index.java page, I have a List of user favorites that I retrieve using userService: List<Favorite> favorites = userService .getFavoritesByUserId(userSession.getUsrId()); JSONArray jsonArray = new JSONArray(); for (Favori ...

Maximizing the efficiency of critical rendering path while utilizing bootstrap

Is it feasible to enhance the critical rendering path (like Google and Facebook) while utilizing Bootstrap 3? Facebook opted for inlining styles connected to the header and sidebars. Meanwhile, Google inlined all styles since they have minimal styles for ...

Center align the paragraphs with an increasing line length for each line

Is there a way to align a paragraph while increasing the length of each line in a consistent manner? Here is an example from sampleFile.html: <div className="copyright-text"> <p>Can we align a paragraph in a way that the length of each li ...

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

I have a task at hand where I need to manipulate text input from a contenteditable division, use regex to identify specific words, and then wrap those words within an angular component. Although I have managed to successfully replace the text with the com ...

CSS Problem - Struggling to display <div> element in inline format

Here is the HTML code I am struggling with: @using (Html.BeginForm("Create", "BicycleSellerListing", FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.ValidationSummary(true) <fieldset style="margin:5px;"> <legen ...

Tips for displaying the HTML content within the autocomplete box

My situation involves a text input and an HTML form where users can submit their name to retrieve information. I am using AJAX to display the usernames dynamically. <div class="hidesearch" id="search" style="width:"400px;"> <inp ...

Ajax updates previous text to new text upon successfully completing the task

I have a question regarding changing text using AJAX after success. I have written this AJAX code which is functioning properly. However, I aim to replace the old text with new text in the .chnged div. For instance: <input type="text" name="text" va ...

The image width does not match the width of the table element

Currently, I am working on an HTML newsletter and facing an issue where the width of my image does not match the full width of the td tag, despite both having the same pixel value. The image appears as 180 pixels wide, whereas the td tag is set to be 186 ...