Create a mobile-friendly thumbnail gallery in the center of the page

Check out my website:

I am struggling to keep the thumbnail gallery centered on my site at all times.

I have tried using the following CSS:

text-align: center;

On the parent element and setting thumbnails as:

display: inline-block;

But unfortunately, the thumbnails keep floating left instead of staying centered.

I attempted to use media queries to force a margin from the left side for smaller screens:

@media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;  
}
}

However, I am looking for an easier way to consistently center the ul regardless of browser width.

Any suggestions on how I can achieve this?

htmlcssthumbnailsimage-gallerytwitter-bootstrap-2

Answer №1

Make sure to incorporate these updates and eliminate the left-margins that were marked with !important on the ul

.gallery > div {
  display: block;
  float: none;
  margin-top: 10px;
  margin-right: 15px;
}

.gallery {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

Note: Remember to add this at the end of your css/styles.css document.

Answer №2

Include the following CSS media query in your code:

@media (min-width: 1200px)
.thumbnails {
    max-width:1200px
}

It might be necessary to modify the media queries for various screen sizes.

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

Creating a slanted line across a <div> or <span> tag

I'm looking to create a diagonal line from the upper-right corner to the lower-left corner within a <div> or <span>. The issue is that the content length varies, so using a static image won't be effective. Essentially, I want to achie ...

htmlcss

Numerous web pages featuring the same title and navigation menus

Creating my personal academic website involves multiple pages that share a common structure. Question: I'm searching for a method to avoid duplicating the header and menu code in each HTML file. Is there an approach where I can store the code for the ...

htmlcss

TinyMCE file multimedia upload feature allows users to easily add audio, video

I am looking to enhance the functionality of my TinyMCE Editor by enabling file uploads for audio/video and images. Although image uploading is functioning properly, I am encountering issues with other types of files. Despite setting up pickers throughout, ...

javascriptphpjqueryhtmltinymce

Are background images covering hidden text detrimental to accessibility?

Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...

htmlcssaccessibility

Leveraging ng-class with an Angular $scope attribute

My HTML structure includes: <div class="myDiv"> <div style="width:200px; height:200px;background-image:url('img/200x200/{{largeImg}}.png');" ng-class="{'magictime foolishIn': 1}"> <span> { ...

javascriptjquerycssangularjs

When the <body onload="function()"> event is triggered, my animated image freezes in

I am working on a preload page that includes an animation. <body onload="showSpinner()"> <h3>Please Wait...</h3> <script> function showSpinner() { showProgress(); window.loc ...

.netasp.nethtmlvisual-studio

Moving data of a row from one table to another in Laravel by triggering a button click

For instance, consider a scenario where clicking a button moves a row to another table in the database and then deletes it. Implementing this functionality in Laravel seems challenging as I am unable to find any relevant resources or guidance on how to pro ...

javascriptphphtmljquerylaravel

Determining the height of a jQuery mobile page

Struggling for the last 24 hours to adjust the min-height styling on a jQuery mobile page specifically for mobile safari. Despite trying various methods like inline styles and overriding ui-page styles, I have not been successful in changing the height of ...

jqueryjquery-mobilecss

Troubleshooting problems with encoding in a PHP contact form

As a newcomer to PHP, HTML, and programming in general, I am working on creating a contact form using PHP and HTML. So far, everything is functioning properly and I am able to receive emails. However, there is one issue - when I try to fill out the form in ...

phphtmlencoding

When using CSS, targeting the parent <label> element of a selected <input> element

Update: it seems that I cannot utilize <> brackets as it hides names?... I have come across similar versions of this query, but none of them address my specific problem, which I believe is quite simple. I am constructing the following radio button g ...

cssreactjs

Troubleshooting: Difficulty getting CSS `position: absolute` to correctly position a div above all other elements

In my current project, I am utilizing Javascript, specifically the VueJS framework, to create a page named mainTextEditor. This page consists of a text field and a 'popup' that is implemented using a div with a v-if directive to show the div when ...

javascripthtmlcssvue.jsvuetify.js

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Any recommendations on how to specifically code the styles for portrait orientation solely on the Kindle Fire device? ...

htmlcsstabs

Using AngularJS to create a placeholder for a <select> element within ng-repeat

I’ve been facing a challenge while trying to insert a placeholder within an html select tag utilizing ng-repeat for an AngularJS application. Here is the JS fiddle link This is how my HTML structure appears: <div ng-repeat="item in items"> <d ...

htmlangularjs

Moving the search box of a Jquery Datatable to a new location

Is it possible to reposition the filter box outside of the jQuery data table and make it look like this? What steps do I need to take to achieve that? ...

jquerycssdatatablesjquery-datatables-editor

Struggle with typescript integration with emotion and styled components

Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...

cssreactjstypescriptstyled-componentsemotion

Leveraging the power of React in conjunction with an HTML template

After purchasing an HTML template from theme forest, I am now looking to incorporate React into it. While I find implementing Angular easy, I would like to expand my skills and learn how to use React with this template. Can anyone provide guidance on how ...

javascripthtmlcssreactjsfrontend

Creating a single div with content that spans the entire page when printed

I am working on an Aurelia app that requires printing out labels. The challenge I am facing is getting a hidden div on the page, containing the label layout, to be printed in full size and stretched to fit the entire page in landscape orientation. Currentl ...

htmlcssaurelia

Inquiries regarding jQuery's functionality and efficiency

I was wondering about the best way to improve performance? Would it be more efficient to have two images written in HTML, one visible and one hidden, and then use jQuery to toggle their display (hiding the visible one and showing the hidden one)? <img ...

jqueryhtmlcssimageperformance

Pressing the different buttons on a form does not result in the form being submitted

I have a form with multiple buttons that, when submitted, will redirect to a different page and pass along some variables. echo " <form method=\"POST\" action=\"sightWordsTest.php\"> ...

phpjqueryhtmlforms

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS. <div class="switch&q ...

javascripthtmlcsscheckboxonchange