Adjusting the size of menus and text on the screen

A while back, I enlisted the services of a web developer to create my website, but unfortunately, it was never properly optimized for resizing windows. Despite numerous attempts to contact him for fixes over the past 5 months, he claims to be too busy at the moment. Since I have some knowledge of coding websites, I thought I'd turn to this fantastic community for help. The website in question is

There are currently two major issues that are causing me frustration. Firstly, the search bar centers itself below the logo, and secondly, resizing the window causes the shopping cart icon to jump onto a new line once it reaches half-size. My desired outcome is for both the search bar and shopping cart to remain on the same line aligned to the right side of the page. I understand that the menu bar may become too wide in doing so, therefore, I am curious if there's a way to dynamically resize the text as well when adjusting the window size? If so, how can this be achieved?

I've provided the style.css file below—note that the one from the actual website is minified, with minor alterations made by me—including font changes (Open Sans). I haven't modified anything related to the menu, search bar, or logo, except for the font change. Feel free to search the code for relevant sections.

I attempted to tackle these problems myself several times without success, and I'm concerned that frequent changes to the webpage might deter potential customers.

Style.css

/*
PALETTE:
navy basic : #434a54;
...
...
... (remaining content omitted)
...
...
...
*/
/* BASIC */

html {
    position: relative;
    ...
    

Answer №1

Make sure to review the combined.min.css file and update the HTML from col-sm-8 to col-sm-6

body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 14px; //changed from 16px to 14px
    font-weight: 400;
    margin-bottom: 200px;
    color: #000;
}

@media (min-width: 768px)
.col-sm-6 {
    width: 50%;
    float: right; // be sure to add this line
}

For the changes in the HTML:

<div class="row"><span class="brand col-md-6"><a href="/"><img src="assets/img/logo.png" alt="Dronebutikken.dk" title="Drone shop Logo" width="300"></a></span><div class="col-sm-6 hidden-xs"><form id="header-search-form" class="form-search form-horizontal pull-right" action="http://dronebutikken.dk/search"><div class="input-append col-sm-12"><div class="search-wrap"><input type="text" class="search-query" name="search" value="" placeholder="Enter search term"><button type="submit" class="btn btn-primary search-button" value=" "><i class="flaticon-zoom22"></i></button></div></div></form></div></div>

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

Tips on how to transform an <input type="text"> element into a <tr> element using jquery

I am currently working on updating a row using jQuery Ajax. Whenever the Edit button is clicked, it switches the <tr> element to <input type='text'>. I have utilized the .Change method which triggers successfully, but my goal is to r ...

Using line breaks and horizontal scrolling in HTML and CSS

I am struggling with a div that contains multiple small spans. My goal is to implement a horizontal scrollbar that extends up until the line break tags (a-z on each line) in order to view the full content on narrow screens. Although I have applied the &ap ...

CSS animations using keyframes to continuously move text from left to right

I've been experimenting with text animation, and I've noticed that at the end of the animation, there is a sudden transition cut. What I'm aiming for is to have the text continuously shifting. text { animation: scrollText 5s ...

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

Struggling to deploy my Laravel application with Tailwind CSS on the frontend. However, running "npm run dev" results in an error

While running the npm command `npm run dev` in cmd, I encountered an error stating that I require PostCSS v8 even though I already have PostCSS v8.3 installed. Could it be possible that Tailwind CSS specifically needs version 8 despite newer versions being ...

Issues with radio buttons not functioning or being able to be selected in Internet Explorer

My radio buttons are functioning perfectly in Chrome, Firefox, and Safari, but for some reason, they are not selectable in Internet Explorer (Version 7). Any suggestions on how I can resolve this issue? HTML: <label> <input type="radio" name ...

Is it possible to display this code through printing rather than using an onclick event?

I have a puzzle website in the works where users select a puzzle to solve. I am looking for a way to display the puzzles directly on the website instead of using pop-up boxes. I am proficient in various coding languages, so any solution will work for me. ...

Is there a way to dynamically set the width in CSS based on the width of characters used?

The value of rem is based on font height. Therefore, when setting width in rem for layout or media query purposes, it is determined by the height of the characters, not the width. I believe this may not be ideal for creating layouts. ...

How can I add a Facebook HTML5 Like Button to AJAX Pages?

I am trying to implement the Facebook HTML5 Like Button on my Ajax views. On my main page, this is what I have: <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById( ...

Avoiding mistakes in class and id names with preventative tools

Is there a simple way to spot typos in HTML/CSS/JavaScript code? I'm looking for basic debugging tools that can catch mistakes like "#fron" instead of "#from" in class names and ids. I'm aware of more advanced IDEs, but I'm curious if there ...

Creating a unique Angular 2 Custom Pipe tutorial

I've come across various instances of NG2 pipes online and decided to create one myself recently: @Pipe({name: 'planDatePipe'}) export class PlanDatePipe implements PipeTransform { transform(value: string): string { return sessionStor ...

Struggling to get custom button hover styles to work in React?

In the React project I'm working on, there is a button that has been configured in the following manner. <label style={styles.label}> <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} /& ...

Tips for Aligning Images of Various Sizes in the Center of a div

My images are displayed in a horizontal line, but some have different sizes. I want to center all the images within their container div for a better look. Is there a way to do this automatically with CSS so that the images remain centered regardless of siz ...

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

The art of arranging React components

I'm struggling to organize my react components properly and I'm having difficulty with CSS Flexbox. Here are the 3 react components: function App() { return ( <> <div className = "header"> <h1>Connect ...

When a user accesses a page, the UI-router shows the raw code in the UI-views

I am a newcomer to utilizing ui-router and I am facing challenges with managing routing and reloading some states. Any assistance would be greatly appreciated. An overview of my index.html <html ng-app="resApp"> <head></head> < ...

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Currently, I am working on a website with only one HTML page. The main functionality involves fetching the URL to extract an ID and then sending it to an API using an AJAX call. Upon success, the data related to the extracted ID is displayed on the page. H ...

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

I am working on developing a webpage that is specifically designed to work for resolutions of 800 x 600 pixels and higher. Any other resolutions will display the message "This website can only be accessed from desktops." Here is my approach using jQuery: ...

Updateable bootstrap table row on button press with jquery

I'm attempting to modify the content of a bootstrap table with jQuery on a button click. I found a helpful resource on this post making row editable and have successfully implemented the functionality. However, the issue I'm facing is having to d ...

Sticky positioning causes elements to stick to the window as the

https://i.stack.imgur.com/nv3vU.png I am facing an issue with a position sticky block that can vary in height relative to the window size. Sometimes, the block is taller than the viewport, making it impossible to scroll to see all the content. Is there a ...